dsh-coding-subscription-oauth 0.5.4 → 0.5.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dsh-coding-subscription-oauth",
   "description": "DeepSeek Harness coding-subscription OAuth: SuperGrok/Grok Build, ChatGPT Plus Codex, Kimi Code, Claude Code. Fixes AUTH API key is invalid, INVALID_REPLAY_STATE, grok-4.6 xhigh, Kimi Bearer vs x-api-key.",
-  "version": "0.5.4",
+  "version": "0.5.5",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"

package/src/client/GrokBuildSettings.tsx

@@ -1,11 +1,12 @@
 /** Plugin-owned coding subscription account section inside the dsh Settings shell. */
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { cancelPreviewTicket, copyText, isConflictError, isConsumedPreviewError, jsonRequest } from "./api.ts";
 import { AboutTab } from "./components/AboutTab.tsx";
 import { AccountsTab } from "./components/AccountsTab.tsx";
 import { CapabilitiesTab } from "./components/CapabilitiesTab.tsx";
 import { GatewayTab } from "./components/GatewayTab.tsx";
+import type { SettingsTabHint } from "./components/SettingsTabs.tsx";
 import { SettingsTabs } from "./components/SettingsTabs.tsx";
 import {
 	CAPABILITIES_PATH,
@@ -28,6 +29,7 @@ import {
 	STATUS_PATH,
 } from "./constants.ts";
 import { isLikelyRemoteHost } from "./display.ts";
+import { ensureMicroStyles } from "./microStyles.ts";
 import {
 	emptyCapabilitySettings,
 	mergeSources,
@@ -185,6 +187,7 @@ export function GrokBuildSettings({ t }: GrokBuildSettingsProps) {
 
 	// Accounts: status immediately; sources shortly after (non-blocking for first paint).
 	useEffect(() => {
+		ensureMicroStyles();
 		void refresh();
 		const timer = window.setTimeout(() => {
 			void refreshSources();
@@ -441,6 +444,22 @@ export function GrokBuildSettings({ t }: GrokBuildSettingsProps) {
 
 	const showUsage = capabilities?.value.codexUsage === true && status?.providers.codex.status === "signed-in";
 
+	const tabHints = useMemo((): readonly SettingsTabHint[] => {
+		const hints: SettingsTabHint[] = [];
+		if (status !== undefined) {
+			const signedInCount = Object.values(status.providers).filter(
+				(provider) => provider.status === "signed-in",
+			).length;
+			if (signedInCount > 0) {
+				hints.push({ id: "accounts", suffix: String(signedInCount) });
+			}
+		}
+		if (gateway?.running === true) {
+			hints.push({ id: "gateway", suffix: t("tabGatewayActive") });
+		}
+		return hints;
+	}, [gateway?.running, status, t]);
+
 	const markCopied = (field: CopyField): void => {
 		if (copiedTimerRef.current !== undefined) window.clearTimeout(copiedTimerRef.current);
 		setCopiedField(field);
@@ -570,7 +589,7 @@ export function GrokBuildSettings({ t }: GrokBuildSettingsProps) {
 					{requestError}
 				</p>
 			)}
-			<SettingsTabs t={t} activeTab={activeTab} onChange={setActiveTab} />
+			<SettingsTabs t={t} activeTab={activeTab} onChange={setActiveTab} hints={tabHints} />
 			<div
 				id={`coding-oauth-panel-${activeTab}`}
 				role="tabpanel"
@@ -635,6 +654,9 @@ export function GrokBuildSettings({ t }: GrokBuildSettingsProps) {
 						onRefreshSources={() => {
 							void refreshSources();
 						}}
+						onDismissSourcesNotice={() => {
+							setSourcesNotice(undefined);
+						}}
 					/>
 				) : null}
 				{activeTab === "capabilities" ? (

package/src/client/components/AccountsTab.tsx

@@ -5,16 +5,13 @@ 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 {
@@ -26,7 +23,9 @@ import type {
 	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 {
@@ -61,6 +60,7 @@ export interface AccountsTabProps {
 	onCommitSource: () => void;
 	onCancelSourcePreview: () => void;
 	onRefreshSources: () => void;
+	onDismissSourcesNotice: () => void;
 }
 
 export function AccountsTab({
@@ -95,6 +95,7 @@ export function AccountsTab({
 	onCommitSource,
 	onCancelSourcePreview,
 	onRefreshSources,
+	onDismissSourcesNotice,
 }: AccountsTabProps) {
 	if (status === undefined) {
 		return (
@@ -110,37 +111,35 @@ export function AccountsTab({
 	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>
+				<NoticeBanner
+					message={t("remoteAccountsTip")}
+					dismissLabel={t("remoteTipDismiss")}
+					onDismiss={onDismissRemoteTip}
+				/>
 			) : 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>
+				<NoticeBanner
+					message={t("sourcesAllMissingHint")}
+					dismissLabel={t("sourcesCheckAgain")}
+					onDismiss={() => {
+						onRefreshSources();
+					}}
+				/>
 			) : null}
 			{anyOfficialCliAvailable(sources) ? <p style={hintStyle}>{t("sourcesAvailableHint")}</p> : null}
 			{sourcesError === undefined ? null : (
-				<p style={errorStyle} role="alert">
+				<p style={{ ...bodyStyle, color: "var(--dsw-alias-state-error-primary)" }} role="alert">
 					{sourcesError}
 				</p>
 			)}
 			{sourcesNotice === undefined ? null : (
-				<p style={bodyStyle} role="status">
-					{sourcesNotice}
-				</p>
+				<NoticeBanner
+					key={sourcesNotice}
+					message={sourcesNotice}
+					tone="success"
+					autoHideMs={5000}
+					onDismiss={onDismissSourcesNotice}
+				/>
 			)}
 			<div style={accountGridStyle}>
 				{PROVIDERS.map((definition) => {
@@ -199,10 +198,11 @@ export function AccountsTab({
 								<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>
+						<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>

package/src/client/components/Badge.tsx

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

@@ -5,7 +5,6 @@ import { imagineSourceLabel } from "../parsers.ts";
 import {
 	bodyStyle,
 	cardStyle,
-	checkRowStyle,
 	dotStyle,
 	errorStyle,
 	hintStyle,
@@ -23,6 +22,8 @@ import type {
 	GrokBuildSettingsInjected,
 	ImagineCredentialView,
 } from "../types.ts";
+import { Badge } from "./Badge.tsx";
+import { ToggleSwitch } from "./ToggleSwitch.tsx";
 
 export interface CapabilitiesTabProps {
 	t: GrokBuildSettingsInjected["t"];
@@ -68,10 +69,10 @@ export function CapabilitiesTab({
 				</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>
+					<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>
 			)}
@@ -98,25 +99,34 @@ export function CapabilitiesTab({
 							const checked = capabilities.value[item.key];
 							const imagesOff = item.requiresImages === true && !capabilities.value.codexImages;
 							const disabled = capabilitiesBusy || !capabilities.writable || imagesOff;
+							const switchId = `cap-switch-${item.key}`;
 							return (
-								<li key={item.key}>
-									<label style={checkRowStyle}>
-										<input
-											type="checkbox"
+								<li
+									key={item.key}
+									style={{
+										opacity: imagesOff ? 0.5 : 1,
+										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 }}>
+												{imagesOff ? t("requiresCodexImages") : t(item.hint)}
+											</span>
+										</label>
+										<ToggleSwitch
+											id={switchId}
 											checked={checked}
 											disabled={disabled}
-											aria-describedby={`cap-hint-${item.key}`}
-											onChange={(event) => {
-												void onPatchCapability(item.key, event.target.checked);
+											ariaLabel={t(item.label)}
+											onChange={(next) => {
+												void onPatchCapability(item.key, next);
 											}}
 										/>
-										<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>
+									</div>
 								</li>
 							);
 						})}
@@ -126,25 +136,28 @@ export function CapabilitiesTab({
 						{imagineToggles.map((item) => {
 							const checked = capabilities.value[item.key];
 							const disabled = capabilitiesBusy || !capabilities.writable;
+							const switchId = `cap-switch-${item.key}`;
 							return (
 								<li key={item.key}>
-									<label style={checkRowStyle}>
-										<input
-											type="checkbox"
+									<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 }}>
+												{t(item.hint)}
+											</span>
+										</label>
+										<ToggleSwitch
+											id={switchId}
 											checked={checked}
 											disabled={disabled}
-											aria-describedby={`cap-hint-${item.key}`}
-											onChange={(event) => {
-												void onPatchCapability(item.key, event.target.checked);
+											ariaLabel={t(item.label)}
+											onChange={(next) => {
+												void onPatchCapability(item.key, next);
 											}}
 										/>
-										<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>
+									</div>
 								</li>
 							);
 						})}

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

@@ -1,7 +1,8 @@
 /** Local API gateway settings tab. */
 
-import { useState } from "react";
+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,
@@ -16,12 +17,18 @@ import {
 	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"];
@@ -47,6 +54,15 @@ export interface GatewayTabProps {
 	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,
@@ -71,6 +87,23 @@ export function GatewayTab({
 	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");
@@ -107,10 +140,10 @@ export function GatewayTab({
 				</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>
+					<Badge
+						label={gateway.running ? t("gatewayRunning") : t("gatewayStopped")}
+						tone={gateway.running ? "success" : "neutral"}
+					/>
 					{enableConfirm ? (
 						<div style={nestedStyle}>
 							<p style={bodyStyle}>{t("gatewayEnableConfirm")}</p>
@@ -166,6 +199,11 @@ export function GatewayTab({
 						<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"
@@ -177,7 +215,16 @@ export function GatewayTab({
 								value={portDraft}
 								disabled={gatewayBusy}
 								aria-describedby="coding-oauth-gateway-port-hint"
-								style={{ ...inputStyle, width: 112, flex: "0 0 112px" }}
+								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);
 								}}
@@ -194,9 +241,7 @@ export function GatewayTab({
 							<button
 								type="button"
 								style={primaryButtonStyle}
-								disabled={
-									gatewayBusy || portDraft === String(gateway.port) || parseGatewayPort(portDraft) === undefined
-								}
+								disabled={gatewayBusy || !portChanged || !portValid}
 								onClick={onApplyPort}
 							>
 								{t("gatewayPortApply")}
@@ -262,6 +307,38 @@ export function GatewayTab({
 						</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>

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>
+	);
+}