dsh-coding-subscription-oauth 0.5.2 → 0.5.4

package/src/client/api.ts

@@ -0,0 +1,88 @@
+/** Same-origin JSON helpers for the Coding OAuth plugin HTTP API. */
+
+import { CONSUMED_PREVIEW_CODES, SOURCES_CANCEL_PATH } from "./constants.ts";
+import type { PluginRequestError } from "./types.ts";
+
+export function isRecord(value: unknown): value is Record<string, unknown> {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+export function isPluginRequestError(error: unknown): error is PluginRequestError {
+	return error instanceof Error && error.name === "PluginRequestError" && "status" in error;
+}
+
+export function isConflictError(error: unknown): boolean {
+	if (!isPluginRequestError(error)) {
+		return (
+			error instanceof Error && /SETTINGS_CONFLICT|settings-conflict|changed since it was read/iu.test(error.message)
+		);
+	}
+	return error.status === 409 || error.code === "SETTINGS_CONFLICT" || /conflict/iu.test(error.message);
+}
+
+export function isConsumedPreviewError(error: unknown): boolean {
+	if (!isPluginRequestError(error)) return false;
+	if (error.code !== undefined && CONSUMED_PREVIEW_CODES.has(error.code)) return true;
+	return error.status === 404 || error.status === 410;
+}
+
+export function cancelPreviewTicket(previewId: string, keepalive = false): void {
+	void fetch(SOURCES_CANCEL_PATH, {
+		method: "POST",
+		headers: { accept: "application/json", "content-type": "application/json" },
+		credentials: "same-origin",
+		body: JSON.stringify({ previewId }),
+		...(keepalive ? { keepalive: true } : {}),
+	}).catch(() => undefined);
+}
+
+export async function jsonRequest<T>(path: string, method = "GET", body?: unknown): Promise<T> {
+	const response = await fetch(path, {
+		method,
+		headers: { accept: "application/json", ...(body === undefined ? {} : { "content-type": "application/json" }) },
+		credentials: "same-origin",
+		...(body === undefined ? {} : { body: JSON.stringify(body) }),
+	});
+	const value: unknown = await response.json().catch(() => undefined);
+	if (!response.ok) {
+		const record = isRecord(value) ? value : undefined;
+		const message =
+			record !== undefined && typeof record["error"] === "string"
+				? record["error"]
+				: record !== undefined && typeof record["message"] === "string"
+					? record["message"]
+					: `HTTP ${response.status}`;
+		const code = record !== undefined && typeof record["code"] === "string" ? record["code"] : undefined;
+		const error = new Error(message) as PluginRequestError;
+		error.name = "PluginRequestError";
+		error.status = response.status;
+		if (code !== undefined) error.code = code;
+		throw error;
+	}
+	return value as T;
+}
+
+export async function copyText(text: string): Promise<boolean> {
+	try {
+		if (typeof navigator !== "undefined" && navigator.clipboard?.writeText !== undefined) {
+			await navigator.clipboard.writeText(text);
+			return true;
+		}
+	} catch {
+		// fall through to execCommand
+	}
+	try {
+		const area = document.createElement("textarea");
+		area.value = text;
+		area.setAttribute("readonly", "");
+		area.style.position = "fixed";
+		area.style.left = "-9999px";
+		document.body.appendChild(area);
+		area.select();
+		const ok = document.execCommand("copy");
+		document.body.removeChild(area);
+		return ok;
+	} catch {
+		return false;
+	}
+}

package/src/client/components/AboutTab.tsx

@@ -0,0 +1,20 @@
+/** About tab: terms, remote help, and plugin version. */
+
+import { PLUGIN_VERSION } from "../constants.ts";
+import { bodyStyle, cardStyle, hintStyle, warningStyle } from "../styles.ts";
+import type { GrokBuildSettingsInjected } from "../types.ts";
+
+export interface AboutTabProps {
+	t: GrokBuildSettingsInjected["t"];
+}
+
+export function AboutTab({ t }: AboutTabProps) {
+	return (
+		<section style={cardStyle} aria-labelledby="coding-oauth-about-title">
+			<p style={warningStyle}>{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>
+		</section>
+	);
+}

package/src/client/components/AccountsTab.tsx

@@ -0,0 +1,224 @@
+/** Accounts tab: provider cards, CLI tips, and pull preview. */
+
+import { PROVIDERS } from "../constants.ts";
+import { allOfficialCliMissing, anyOfficialCliAvailable } from "../display.ts";
+import {
+	accountGridStyle,
+	bodyStyle,
+	buttonStyle,
+	cardStyle,
+	dotStyle,
+	errorStyle,
+	hintStyle,
+	monoStyle,
+	rowStyle,
+	skeletonStyle,
+	statusStyle,
+	tipStyle,
+	titleStyle,
+} from "../styles.ts";
+import type {
+	CodingOAuthStatus,
+	GrokBuildSettingsInjected,
+	LoginMethod,
+	ProviderSlug,
+	SourcePreview,
+	SourceStatus,
+	UsageView,
+} from "../types.ts";
+import { CliPullPreview } from "./CliPullPreview.tsx";
+import { ProviderCard } from "./ProviderCard.tsx";
+
+export interface AccountsTabProps {
+	t: GrokBuildSettingsInjected["t"];
+	status: CodingOAuthStatus | undefined;
+	remote: boolean;
+	remoteTipDismissed: boolean;
+	onDismissRemoteTip: () => void;
+	sources: readonly SourceStatus[] | undefined;
+	sourcesError: string | undefined;
+	sourcesNotice: string | undefined;
+	sourcesBusy: boolean;
+	preview: SourcePreview | undefined;
+	confirmOverwrite: boolean;
+	busyProvider: ProviderSlug | undefined;
+	codeInputs: Partial<Record<ProviderSlug, string>>;
+	popupBlocked: Partial<Record<ProviderSlug, boolean>>;
+	expandedProviders: Partial<Record<ProviderSlug, boolean>>;
+	showUsage: boolean;
+	usage: UsageView | undefined;
+	usageError: string | undefined;
+	usageLoading: boolean;
+	onSignIn: (slug: ProviderSlug, method: LoginMethod) => void;
+	onSignOut: (slug: ProviderSlug) => void;
+	onCancelLogin: (slug: ProviderSlug) => void;
+	onSubmitCode: (slug: ProviderSlug) => void;
+	onCodeChange: (slug: ProviderSlug, value: string) => void;
+	onToggleExpanded: (slug: ProviderSlug) => void;
+	onPreviewSource: (slug: ProviderSlug) => void;
+	onSaveModels: (slug: ProviderSlug, selected: string[]) => void;
+	onConfirmOverwriteChange: (checked: boolean) => void;
+	onCommitSource: () => void;
+	onCancelSourcePreview: () => void;
+	onRefreshSources: () => void;
+}
+
+export function AccountsTab({
+	t,
+	status,
+	remote,
+	remoteTipDismissed,
+	onDismissRemoteTip,
+	sources,
+	sourcesError,
+	sourcesNotice,
+	sourcesBusy,
+	preview,
+	confirmOverwrite,
+	busyProvider,
+	codeInputs,
+	popupBlocked,
+	expandedProviders,
+	showUsage,
+	usage,
+	usageError,
+	usageLoading,
+	onSignIn,
+	onSignOut,
+	onCancelLogin,
+	onSubmitCode,
+	onCodeChange,
+	onToggleExpanded,
+	onPreviewSource,
+	onSaveModels,
+	onConfirmOverwriteChange,
+	onCommitSource,
+	onCancelSourcePreview,
+	onRefreshSources,
+}: AccountsTabProps) {
+	if (status === undefined) {
+		return (
+			<div style={skeletonStyle} role="status" aria-busy="true">
+				<div style={statusStyle}>
+					<span aria-hidden="true" style={dotStyle("loading")} />
+					{t("loadingAccount")}
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<>
+			{remote && !remoteTipDismissed ? (
+				<div
+					style={{ ...tipStyle, display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 12 }}
+				>
+					<p style={{ ...bodyStyle, margin: 0, color: "var(--dsw-alias-label-primary)" }}>{t("remoteAccountsTip")}</p>
+					<button type="button" style={buttonStyle} onClick={onDismissRemoteTip}>
+						{t("remoteTipDismiss")}
+					</button>
+				</div>
+			) : null}
+			{allOfficialCliMissing(sources) ? (
+				<div
+					style={{ ...tipStyle, display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 12 }}
+				>
+					<p style={{ ...bodyStyle, margin: 0, color: "var(--dsw-alias-label-primary)" }}>
+						{t("sourcesAllMissingHint")}
+					</p>
+					<button type="button" style={buttonStyle} disabled={sourcesBusy} onClick={onRefreshSources}>
+						{t("sourcesCheckAgain")}
+					</button>
+				</div>
+			) : null}
+			{anyOfficialCliAvailable(sources) ? <p style={hintStyle}>{t("sourcesAvailableHint")}</p> : null}
+			{sourcesError === undefined ? null : (
+				<p style={errorStyle} role="alert">
+					{sourcesError}
+				</p>
+			)}
+			{sourcesNotice === undefined ? null : (
+				<p style={bodyStyle} role="status">
+					{sourcesNotice}
+				</p>
+			)}
+			<div style={accountGridStyle}>
+				{PROVIDERS.map((definition) => {
+					const providerStatus = status.providers[definition.slug];
+					const expanded = providerStatus.status === "signing-in" || expandedProviders[definition.slug] === true;
+					return (
+						<ProviderCard
+							key={definition.slug}
+							t={t}
+							definition={definition}
+							providerStatus={providerStatus}
+							busy={busyProvider === definition.slug}
+							sourcesBusy={sourcesBusy}
+							remote={remote}
+							codeInput={codeInputs[definition.slug] ?? ""}
+							popupBlocked={popupBlocked[definition.slug] === true}
+							expanded={expanded}
+							source={sources?.find((entry) => entry.kind === definition.slug)}
+							showUsage={showUsage}
+							usage={usage}
+							usageError={usageError}
+							usageLoading={usageLoading}
+							onSignIn={(method) => {
+								onSignIn(definition.slug, method);
+							}}
+							onSignOut={() => {
+								onSignOut(definition.slug);
+							}}
+							onCancelLogin={() => {
+								onCancelLogin(definition.slug);
+							}}
+							onSubmitCode={() => {
+								onSubmitCode(definition.slug);
+							}}
+							onCodeChange={(value) => {
+								onCodeChange(definition.slug, value);
+							}}
+							onToggleExpanded={() => {
+								onToggleExpanded(definition.slug);
+							}}
+							onPreviewSource={() => {
+								onPreviewSource(definition.slug);
+							}}
+							onSaveModels={(selected) => {
+								onSaveModels(definition.slug, selected);
+							}}
+						/>
+					);
+				})}
+				<div style={cardStyle}>
+					<div style={rowStyle}>
+						<div>
+							<h3 style={{ ...titleStyle, fontSize: 16 }}>{t("antigravityTitle")}</h3>
+							<p style={{ ...bodyStyle, marginTop: 4 }}>{t("antigravityDescription")}</p>
+							<p style={{ ...bodyStyle, marginTop: 4 }}>
+								<span style={monoStyle}>{status.antigravity.route}</span>
+							</p>
+						</div>
+						<div style={statusStyle} role="status">
+							<span aria-hidden="true" style={dotStyle("signed-out", status.antigravity.installed)} />
+							<span>{status.antigravity.installed ? t("antigravityInstalled") : t("antigravityMissing")}</span>
+						</div>
+					</div>
+					<p style={bodyStyle}>{t("antigravityCliHint")}</p>
+					<code style={{ ...monoStyle, fontSize: 12, overflowWrap: "anywhere" }}>{t("antigravityCliCommand")}</code>
+				</div>
+			</div>
+			{preview === undefined ? null : (
+				<CliPullPreview
+					t={t}
+					preview={preview}
+					confirmOverwrite={confirmOverwrite}
+					sourcesBusy={sourcesBusy}
+					onConfirmOverwriteChange={onConfirmOverwriteChange}
+					onCommit={onCommitSource}
+					onCancel={onCancelSourcePreview}
+				/>
+			)}
+		</>
+	);
+}

package/src/client/components/CapabilitiesTab.tsx

@@ -0,0 +1,214 @@
+/** Capabilities tab: Codex toggles, Grok Imagine, and limits. */
+
+import { CAPABILITY_LIMITS, CAPABILITY_TOGGLES } from "../constants.ts";
+import { imagineSourceLabel } from "../parsers.ts";
+import {
+	bodyStyle,
+	cardStyle,
+	checkRowStyle,
+	dotStyle,
+	errorStyle,
+	hintStyle,
+	inputStyle,
+	listStyle,
+	nestedStyle,
+	rowStyle,
+	skeletonStyle,
+	statusStyle,
+	titleStyle,
+} from "../styles.ts";
+import type {
+	CapabilitySettingKey,
+	CapabilitySnapshot,
+	GrokBuildSettingsInjected,
+	ImagineCredentialView,
+} from "../types.ts";
+
+export interface CapabilitiesTabProps {
+	t: GrokBuildSettingsInjected["t"];
+	capabilities: CapabilitySnapshot | undefined;
+	capabilitiesError: string | undefined;
+	capabilitiesBusy: boolean;
+	imagine: ImagineCredentialView | undefined;
+	imagineError: string | undefined;
+	onPatchCapability: (key: CapabilitySettingKey, value: boolean | number) => Promise<boolean | undefined> | undefined;
+}
+
+export function CapabilitiesTab({
+	t,
+	capabilities,
+	capabilitiesError,
+	capabilitiesBusy,
+	imagine,
+	imagineError,
+	onPatchCapability,
+}: CapabilitiesTabProps) {
+	const codexToggles = CAPABILITY_TOGGLES.filter((item) => !item.key.startsWith("grokImagine"));
+	const imagineToggles = CAPABILITY_TOGGLES.filter((item) => item.key.startsWith("grokImagine"));
+
+	return (
+		<section style={cardStyle} aria-labelledby="coding-oauth-capabilities-title">
+			<div>
+				<h3 id="coding-oauth-capabilities-title" style={{ ...titleStyle, fontSize: 16 }}>
+					{t("capabilitiesTitle")}
+				</h3>
+				<p style={{ ...bodyStyle, marginTop: 4 }}>{t("capabilitiesIntro")}</p>
+			</div>
+			{imagineError === undefined ? null : (
+				<p style={errorStyle} role="alert">
+					{imagineError}
+				</p>
+			)}
+			{imagine === undefined && imagineError === undefined ? (
+				<div style={skeletonStyle} role="status" aria-busy="true">
+					<div style={statusStyle}>
+						<span aria-hidden="true" style={dotStyle("loading")} />
+						{t("imagineLoading")}
+					</div>
+				</div>
+			) : imagine === undefined ? null : (
+				<div style={nestedStyle}>
+					<p style={statusStyle} role="status">
+						<span aria-hidden="true" style={dotStyle(imagine.configured ? "available" : "unavailable")} />
+						<span>{imagine.configured ? t("imagineConfigured") : t("imagineNotConfigured")}</span>
+					</p>
+					<p style={hintStyle}>{t("imagineSource", { source: imagineSourceLabel(imagine.source, t) })}</p>
+				</div>
+			)}
+			{capabilitiesError === undefined ? null : (
+				<p style={errorStyle} role="alert">
+					{capabilitiesError}
+				</p>
+			)}
+			{capabilities === undefined ? (
+				<div style={skeletonStyle} role="status" aria-busy="true">
+					<div style={statusStyle}>
+						<span aria-hidden="true" style={dotStyle("loading")} />
+						{t("capabilitiesLoading")}
+					</div>
+				</div>
+			) : (
+				<fieldset style={{ border: 0, margin: 0, padding: 0, minWidth: 0 }}>
+					<legend style={{ ...bodyStyle, position: "absolute", width: 1, height: 1, overflow: "hidden" }}>
+						{t("capabilitiesTitle")}
+					</legend>
+					{capabilities.writable ? null : <p style={hintStyle}>{t("capabilitiesReadOnly")}</p>}
+					<ul style={listStyle}>
+						{codexToggles.map((item) => {
+							const checked = capabilities.value[item.key];
+							const imagesOff = item.requiresImages === true && !capabilities.value.codexImages;
+							const disabled = capabilitiesBusy || !capabilities.writable || imagesOff;
+							return (
+								<li key={item.key}>
+									<label style={checkRowStyle}>
+										<input
+											type="checkbox"
+											checked={checked}
+											disabled={disabled}
+											aria-describedby={`cap-hint-${item.key}`}
+											onChange={(event) => {
+												void onPatchCapability(item.key, event.target.checked);
+											}}
+										/>
+										<span>
+											<span style={{ display: "block" }}>{t(item.label)}</span>
+											<span id={`cap-hint-${item.key}`} style={{ display: "block", ...hintStyle }}>
+												{t(item.hint)}
+											</span>
+										</span>
+									</label>
+								</li>
+							);
+						})}
+					</ul>
+					<h4 style={{ ...titleStyle, fontSize: 14 }}>{t("imagineTitle")}</h4>
+					<ul style={listStyle}>
+						{imagineToggles.map((item) => {
+							const checked = capabilities.value[item.key];
+							const disabled = capabilitiesBusy || !capabilities.writable;
+							return (
+								<li key={item.key}>
+									<label style={checkRowStyle}>
+										<input
+											type="checkbox"
+											checked={checked}
+											disabled={disabled}
+											aria-describedby={`cap-hint-${item.key}`}
+											onChange={(event) => {
+												void onPatchCapability(item.key, event.target.checked);
+											}}
+										/>
+										<span>
+											<span style={{ display: "block" }}>{t(item.label)}</span>
+											<span id={`cap-hint-${item.key}`} style={{ display: "block", ...hintStyle }}>
+												{t(item.hint)}
+											</span>
+										</span>
+									</label>
+								</li>
+							);
+						})}
+					</ul>
+					<div style={nestedStyle}>
+						<h4 style={{ ...titleStyle, fontSize: 14 }}>{t("capabilityLimitsTitle")}</h4>
+						<p style={hintStyle}>{t("capabilityLimitsHint")}</p>
+						<ul style={listStyle}>
+							{CAPABILITY_LIMITS.map((item) => {
+								const displayValue = capabilities.value[item.key] / item.scale;
+								const inputId = `cap-limit-${item.key}`;
+								return (
+									<li key={item.key} style={rowStyle}>
+										<label htmlFor={inputId} style={{ ...bodyStyle, flex: "1 1 360px" }}>
+											<span style={{ display: "block", color: "var(--dsw-alias-label-primary)" }}>{t(item.label)}</span>
+											<span id={`${inputId}-hint`} style={{ display: "block", ...hintStyle }}>
+												{t(item.hint)}
+											</span>
+										</label>
+										<input
+											key={`${item.key}-${String(capabilities.revision)}-${String(displayValue)}`}
+											id={inputId}
+											type="number"
+											inputMode="numeric"
+											min={item.min}
+											max={item.max}
+											step={1}
+											defaultValue={displayValue}
+											disabled={capabilitiesBusy || !capabilities.writable}
+											aria-describedby={`${inputId}-hint`}
+											style={{ ...inputStyle, width: 112, flex: "0 0 112px" }}
+											onInput={(event) => {
+												event.currentTarget.setCustomValidity("");
+											}}
+											onKeyDown={(event) => {
+												if (event.key === "Enter") event.currentTarget.blur();
+												if (event.key === "Escape") {
+													event.currentTarget.value = String(displayValue);
+													event.currentTarget.setCustomValidity("");
+												}
+											}}
+											onBlur={(event) => {
+												const target = event.currentTarget;
+												const next = Number(target.value);
+												if (!Number.isInteger(next) || next < item.min || next > item.max) {
+													target.setCustomValidity(t("capabilityLimitInvalid", { min: item.min, max: item.max }));
+													target.reportValidity();
+													return;
+												}
+												target.setCustomValidity("");
+												const apiValue = next * item.scale;
+												if (apiValue === capabilities.value[item.key]) return;
+												void Promise.resolve(onPatchCapability(item.key, apiValue)).then((saved) => {
+													if (saved === false && target.isConnected) target.value = String(displayValue);
+												});
+											}}
+										/>
+									</li>
+								);
+							})}
+						</ul>
+					</div>
+				</fieldset>
+			)}
+		</section>
+	);
+}

package/src/client/components/CliPullPreview.tsx

@@ -0,0 +1,107 @@
+/** CLI credential pull preview panel. */
+
+import { SOURCE_CONFLICT_KEY, SOURCE_KIND_KEY, SOURCE_PREVIEW_ACTION_KEY } from "../constants.ts";
+import { formatEpoch } from "../parsers.ts";
+import {
+	bodyStyle,
+	buttonStyle,
+	cardStyle,
+	checkRowStyle,
+	hintStyle,
+	listStyle,
+	monoStyle,
+	primaryButtonStyle,
+} from "../styles.ts";
+import type { GrokBuildSettingsInjected, SourcePreview } from "../types.ts";
+
+export interface CliPullPreviewProps {
+	t: GrokBuildSettingsInjected["t"];
+	preview: SourcePreview;
+	confirmOverwrite: boolean;
+	sourcesBusy: boolean;
+	onConfirmOverwriteChange: (checked: boolean) => void;
+	onCommit: () => void;
+	onCancel: () => void;
+}
+
+export function CliPullPreview({
+	t,
+	preview,
+	confirmOverwrite,
+	sourcesBusy,
+	onConfirmOverwriteChange,
+	onCommit,
+	onCancel,
+}: CliPullPreviewProps) {
+	const expiresAt = formatEpoch(preview.expiresAt);
+	const ticketExpiresAt = formatEpoch(preview.ticketExpiresAt);
+
+	return (
+		<div style={cardStyle} aria-live="polite">
+			<p style={bodyStyle}>
+				{t("sourcesPreviewTitle")} · {t(SOURCE_KIND_KEY[preview.kind])}
+			</p>
+			<p style={hintStyle}>
+				<span style={monoStyle}>{preview.displayPath}</span>
+			</p>
+			<p style={bodyStyle}>
+				{t("sourcesConflict", {
+					detail: t(
+						preview.conflict === undefined ? "sourceConflictUnrecognized" : SOURCE_CONFLICT_KEY[preview.conflict],
+					),
+				})}
+			</p>
+			<p style={bodyStyle}>
+				{t("sourcesAction", {
+					detail: t(
+						preview.action === undefined ? "sourceActionUnrecognized" : SOURCE_PREVIEW_ACTION_KEY[preview.action],
+					),
+				})}
+			</p>
+			{expiresAt === undefined ? null : <p style={hintStyle}>{t("sourcesPreviewExpires", { time: expiresAt })}</p>}
+			{ticketExpiresAt === undefined ? null : (
+				<p style={hintStyle}>{t("sourcesTicketExpires", { time: ticketExpiresAt })}</p>
+			)}
+			{preview.warnings.length === 0 ? null : (
+				<ul style={{ ...listStyle, gap: 4 }} aria-label={t("sourcesWarnings")}>
+					{preview.warnings.map((warning) => (
+						<li key={warning} style={hintStyle}>
+							{warning}
+						</li>
+					))}
+				</ul>
+			)}
+			{preview.confirmOverwriteRequired ? (
+				<label style={checkRowStyle}>
+					<input
+						type="checkbox"
+						checked={confirmOverwrite}
+						disabled={sourcesBusy || preview.action === "blocked"}
+						onChange={(event) => {
+							onConfirmOverwriteChange(event.target.checked);
+						}}
+					/>
+					<span>
+						{t("sourcesConfirmOverwrite")}
+						<span style={{ display: "block", ...hintStyle }}>{t("sourcesConfirmOverwriteHint")}</span>
+					</span>
+				</label>
+			) : null}
+			<div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
+				<button
+					type="button"
+					style={primaryButtonStyle}
+					disabled={
+						sourcesBusy || preview.action === "blocked" || (preview.confirmOverwriteRequired && !confirmOverwrite)
+					}
+					onClick={onCommit}
+				>
+					{t("sourcesCommit")}
+				</button>
+				<button type="button" style={buttonStyle} disabled={sourcesBusy} onClick={onCancel}>
+					{t("sourcesCancelPreview")}
+				</button>
+			</div>
+		</div>
+	);
+}