dsh-coding-subscription-oauth 0.6.4 → 0.7.0

package/src/client/api.ts

@@ -1,88 +0,0 @@
-/** 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

@@ -1,30 +0,0 @@
-/** About tab: terms, remote help, and plugin version. */
-
-import { PLUGIN_VERSION } from "../constants.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"];
-}
-
-export function AboutTab({ t }: AboutTabProps) {
-	return (
-		<section style={cardStyle} aria-labelledby="coding-oauth-about-title">
-			<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/AccountsTab.tsx

@@ -1,241 +0,0 @@
-/** Accounts tab: provider cards, CLI tips, and pull preview. */
-
-import { Fragment, useEffect, useRef } from "react";
-import { PROVIDERS } from "../constants.ts";
-import { allOfficialCliMissing, anyOfficialCliAvailable } from "../display.ts";
-import {
-	accountGridStyle,
-	bodyStyle,
-	cardStyle,
-	dotStyle,
-	hintStyle,
-	monoStyle,
-	rowStyle,
-	skeletonStyle,
-	statusStyle,
-	titleStyle,
-} from "../styles.ts";
-import type {
-	CodingOAuthStatus,
-	GrokBuildSettingsInjected,
-	LoginMethod,
-	ProviderSlug,
-	SourcePreview,
-	SourceStatus,
-	UsageView,
-} from "../types.ts";
-import { Badge } from "./Badge.tsx";
-import { CliPullPreview } from "./CliPullPreview.tsx";
-import { NoticeBanner } from "./NoticeBanner.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;
-	onDismissSourcesNotice: () => 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,
-	onDismissSourcesNotice,
-}: AccountsTabProps) {
-	const previousPreviewKind = useRef<ProviderSlug | undefined>(undefined);
-	useEffect(() => {
-		if (preview !== undefined) {
-			previousPreviewKind.current = preview.kind;
-			document.getElementById(`coding-oauth-source-preview-${preview.kind}`)?.focus();
-			return;
-		}
-		const trigger = previousPreviewKind.current;
-		if (trigger === undefined || sourcesBusy) return;
-		previousPreviewKind.current = undefined;
-		document.getElementById(`coding-oauth-source-pull-${trigger}`)?.focus();
-	}, [preview, sourcesBusy]);
-
-	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 ? (
-				<NoticeBanner
-					message={t("remoteAccountsTip")}
-					dismissLabel={t("remoteTipDismiss")}
-					onDismiss={onDismissRemoteTip}
-				/>
-			) : null}
-			{allOfficialCliMissing(sources) ? (
-				<NoticeBanner
-					message={t("sourcesAllMissingHint")}
-					dismissLabel={t("sourcesCheckAgain")}
-					onDismiss={() => {
-						onRefreshSources();
-					}}
-				/>
-			) : null}
-			{anyOfficialCliAvailable(sources) ? <p style={hintStyle}>{t("sourcesAvailableHint")}</p> : null}
-			{sourcesError === undefined ? null : (
-				<p style={{ ...bodyStyle, color: "var(--dsw-alias-state-error-primary)" }} role="alert">
-					{sourcesError}
-				</p>
-			)}
-			{sourcesNotice === undefined ? null : (
-				<NoticeBanner
-					key={sourcesNotice}
-					message={sourcesNotice}
-					tone="success"
-					autoHideMs={5000}
-					onDismiss={onDismissSourcesNotice}
-				/>
-			)}
-			<div style={accountGridStyle}>
-				{PROVIDERS.map((definition) => {
-					const providerStatus = status.providers[definition.slug];
-					const expanded = providerStatus.status === "signing-in" || expandedProviders[definition.slug] === true;
-					return (
-						<Fragment key={definition.slug}>
-							<ProviderCard
-								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);
-								}}
-							/>
-							{preview?.kind === definition.slug ? (
-								<div style={{ gridColumn: "1 / -1", minWidth: 0 }}>
-									<CliPullPreview
-										t={t}
-										preview={preview}
-										confirmOverwrite={confirmOverwrite}
-										sourcesBusy={sourcesBusy}
-										onConfirmOverwriteChange={onConfirmOverwriteChange}
-										onCommit={onCommitSource}
-										onCancel={onCancelSourcePreview}
-									/>
-								</div>
-							) : null}
-						</Fragment>
-					);
-				})}
-				<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>
-						<Badge
-							label={status.antigravity.installed ? t("antigravityInstalled") : t("antigravityMissing")}
-							tone={status.antigravity.installed ? "success" : "neutral"}
-							installed={status.antigravity.installed}
-						/>
-					</div>
-					<p style={bodyStyle}>{t("antigravityCliHint")}</p>
-					<code style={{ ...monoStyle, fontSize: 12, overflowWrap: "anywhere" }}>{t("antigravityCliCommand")}</code>
-				</div>
-			</div>
-		</>
-	);
-}

package/src/client/components/Badge.tsx

@@ -1,33 +0,0 @@
-/** Status capsule badge with semantic tone colors. */
-
-import { badgeStyle, dotStyle, providerStatusTone, type StatusTone } from "../styles.ts";
-import type { ProviderStatus } from "../types.ts";
-
-export interface BadgeProps {
-	label: string;
-	tone?: StatusTone;
-	/** When set, derives tone from provider login status. */
-	providerStatus?: ProviderStatus["status"];
-	installed?: boolean;
-	showDot?: boolean;
-}
-
-export function Badge({ label, tone, providerStatus, installed = true, showDot = true }: BadgeProps) {
-	const resolvedTone =
-		tone ?? (providerStatus !== undefined ? providerStatusTone(providerStatus, installed) : "neutral");
-	return (
-		<span style={badgeStyle(resolvedTone)} role="status">
-			{showDot ? (
-				<span
-					aria-hidden="true"
-					style={{
-						...dotStyle(providerStatus ?? (resolvedTone === "success" ? "signed-in" : "signed-out"), installed),
-						width: 7,
-						height: 7,
-					}}
-				/>
-			) : null}
-			<span>{label}</span>
-		</span>
-	);
-}

package/src/client/components/CapabilitiesTab.tsx

@@ -1,265 +0,0 @@
-/** Capabilities tab: Codex toggles, Grok Imagine, and limits. */
-
-import { CAPABILITY_LIMITS, CAPABILITY_TOGGLES } from "../constants.ts";
-import { imagineSourceLabel } from "../parsers.ts";
-import {
-	bodyStyle,
-	buttonStyle,
-	cardStyle,
-	dotStyle,
-	errorStyle,
-	hintStyle,
-	inputStyle,
-	listStyle,
-	nestedStyle,
-	rowStyle,
-	skeletonStyle,
-	statusStyle,
-	titleStyle,
-} from "../styles.ts";
-import type {
-	CapabilitySettingKey,
-	CapabilitySnapshot,
-	GrokBuildSettingsInjected,
-	ImagineCredentialView,
-} from "../types.ts";
-import { Badge } from "./Badge.tsx";
-import { ToggleSwitch } from "./ToggleSwitch.tsx";
-
-export interface CapabilitiesTabProps {
-	t: GrokBuildSettingsInjected["t"];
-	capabilities: CapabilitySnapshot | undefined;
-	capabilitiesError: string | undefined;
-	capabilitiesBusy: boolean;
-	imagine: ImagineCredentialView | undefined;
-	imagineError: string | undefined;
-	codexSignedIn: boolean;
-	onRetry: () => void;
-	onOpenAccounts: (provider: "codex") => void;
-	onFocusDependency: (target: "codexImages" | "imagineCredential") => void;
-	onPatchCapability: (key: CapabilitySettingKey, value: boolean | number) => Promise<boolean | undefined> | undefined;
-}
-
-export function CapabilitiesTab({
-	t,
-	capabilities,
-	capabilitiesError,
-	capabilitiesBusy,
-	imagine,
-	imagineError,
-	codexSignedIn,
-	onRetry,
-	onOpenAccounts,
-	onFocusDependency,
-	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 : (
-				<div style={nestedStyle} role="alert">
-					<p style={errorStyle}>{imagineError}</p>
-					<button type="button" style={buttonStyle} onClick={onRetry}>
-						{t("retry")}
-					</button>
-				</div>
-			)}
-			{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 id="coding-oauth-imagine-credential" style={nestedStyle} tabIndex={-1}>
-					<Badge
-						label={imagine.configured ? t("imagineConfigured") : t("imagineNotConfigured")}
-						tone={imagine.configured ? "success" : "neutral"}
-					/>
-					<p style={hintStyle}>{t("imagineSource", { source: imagineSourceLabel(imagine.source, t) })}</p>
-				</div>
-			)}
-			{capabilitiesError === undefined ? null : (
-				<div style={nestedStyle} role="alert">
-					<p style={errorStyle}>{capabilitiesError}</p>
-					<button type="button" style={buttonStyle} onClick={onRetry}>
-						{t("retry")}
-					</button>
-				</div>
-			)}
-			{capabilities === undefined && capabilitiesError === undefined ? (
-				<div style={skeletonStyle} role="status" aria-busy="true">
-					<div style={statusStyle}>
-						<span aria-hidden="true" style={dotStyle("loading")} />
-						{t("capabilitiesLoading")}
-					</div>
-				</div>
-			) : capabilities === undefined ? null : (
-				<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 dependencyReason = !codexSignedIn
-								? t("requiresCodexSignIn")
-								: imagesOff
-									? t("requiresCodexImages")
-									: undefined;
-							const disabled = capabilitiesBusy || !capabilities.writable || dependencyReason !== undefined;
-							const switchId = `cap-switch-${item.key}`;
-							const repairAction = !codexSignedIn
-								? { label: t("openCodexAccount"), action: () => onOpenAccounts("codex") }
-								: imagesOff
-									? { label: t("focusCodexImages"), action: () => onFocusDependency("codexImages") }
-									: undefined;
-							return (
-								<li
-									key={item.key}
-									style={{
-										opacity: dependencyReason === undefined ? 1 : 0.65,
-										transition: "opacity 0.15s ease",
-									}}
-								>
-									<div style={{ ...rowStyle, alignItems: "flex-start" }}>
-										<label htmlFor={switchId} style={{ flex: "1 1 360px", cursor: disabled ? "default" : "pointer" }}>
-											<span style={{ display: "block", fontSize: 14, color: "var(--dsw-alias-label-primary)" }}>
-												{t(item.label)}
-											</span>
-											<span id={`cap-hint-${item.key}`} style={{ display: "block", ...hintStyle }}>
-												{dependencyReason ?? t(item.hint)}
-											</span>
-										</label>
-										{repairAction === undefined ? null : (
-											<button type="button" style={buttonStyle} onClick={repairAction.action}>
-												{repairAction.label}
-											</button>
-										)}
-										<ToggleSwitch
-											id={switchId}
-											checked={checked}
-											disabled={disabled}
-											ariaLabel={t(item.label)}
-											ariaDescribedBy={`cap-hint-${item.key}`}
-											onChange={(next) => {
-												void onPatchCapability(item.key, next);
-											}}
-										/>
-									</div>
-								</li>
-							);
-						})}
-					</ul>
-					<h4 style={{ ...titleStyle, fontSize: 14 }}>{t("imagineTitle")}</h4>
-					<ul style={listStyle}>
-						{imagineToggles.map((item) => {
-							const checked = capabilities.value[item.key];
-							const dependencyReason = imagine?.configured === true ? undefined : t("requiresImagineCredential");
-							const disabled = capabilitiesBusy || !capabilities.writable || dependencyReason !== undefined;
-							const switchId = `cap-switch-${item.key}`;
-							return (
-								<li key={item.key}>
-									<div style={{ ...rowStyle, alignItems: "flex-start" }}>
-										<label htmlFor={switchId} style={{ flex: "1 1 360px", cursor: disabled ? "default" : "pointer" }}>
-											<span style={{ display: "block", fontSize: 14, color: "var(--dsw-alias-label-primary)" }}>
-												{t(item.label)}
-											</span>
-											<span id={`cap-hint-${item.key}`} style={{ display: "block", ...hintStyle }}>
-												{dependencyReason ?? t(item.hint)}
-											</span>
-										</label>
-										{dependencyReason === undefined ? null : (
-											<button type="button" style={buttonStyle} onClick={() => onFocusDependency("imagineCredential")}>
-												{t("focusImagineCredential")}
-											</button>
-										)}
-										<ToggleSwitch
-											id={switchId}
-											checked={checked}
-											disabled={disabled}
-											ariaLabel={t(item.label)}
-											ariaDescribedBy={`cap-hint-${item.key}`}
-											onChange={(next) => {
-												void onPatchCapability(item.key, next);
-											}}
-										/>
-									</div>
-								</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>
-	);
-}