fix: migrate CLIs to alpha version of clack

.changeset/migrate-clack-alpha.md

@@ -0,0 +1,12 @@
+---
+"@ascorbic/pds": minor
+"create-pds": minor
+---
+
+Upgrade CLIs to @clack/prompts alpha with enhanced UX features
+
+- **Progress bar**: Replace custom progress rendering with clack's built-in `progress()` API for blob transfers
+- **Info boxes**: Replace ANSI escape hacks with native `box()` prompt supporting title alignment and better formatting
+- **Task logging**: Add `taskLog()` for transient setup steps that clear on success (secret generation, project setup)
+- **Error states**: Use `spinner.error()` for failure cases providing clearer visual distinction
+- **Polished UX**: Focus on reassurance during operations and delight with clean, professional output

packages/create-pds/package.json

@@ -16,7 +16,7 @@
 		"check": "publint"
 	},
 	"devDependencies": {
-		"@clack/prompts": "^0.11.0",
+		"@clack/prompts": "1.0.0-alpha.9",
 		"@types/node": "^24.10.4",
 		"citty": "^0.1.6",
 		"publint": "^0.3.16",

packages/create-pds/src/index.ts

@@ -245,8 +245,9 @@ const main = defineCommand({
 		const pdsVersion = await getLatestPdsVersion();
 		spinner.stop(`Using @ascorbic/pds ${pdsVersion}`);
 
-		spinner.start("Copying template...");
+		const setupTask = p.taskLog({ title: "Setting up project" });
 
+		setupTask.message("Copying template files...");
 		const templateDir = join(__dirname, "..", "templates", "pds-worker");
 		await copyTemplateDir(templateDir, targetDir);
 
@@ -256,27 +257,26 @@ const main = defineCommand({
 			pdsVersion,
 		});
 
-		spinner.stop("Template copied");
-
 		// Initialize git
 		if (initGit) {
-			spinner.start("Initializing git...");
+			setupTask.message("Initializing git repository...");
 			try {
 				await runCommand("git", ["init"], targetDir, { silent: true });
-				spinner.stop("Git initialized");
 			} catch {
-				spinner.stop("Failed to initialize git");
+				setupTask.error("Failed to initialize git");
 			}
 		}
 
+		setupTask.success("Project created");
+
 		// Install dependencies
 		if (!args["skip-install"]) {
 			spinner.start(`Installing dependencies with ${pm}...`);
 			try {
 				await runCommand(pm, ["install"], targetDir, { silent: true });
 				spinner.stop("Dependencies installed");
 			} catch {
-				spinner.stop("Failed to install dependencies");
+				spinner.error("Failed to install dependencies");
 				p.log.warning("You can install dependencies manually later");
 			}
 		}

packages/oauth-provider/README.md

@@ -29,28 +29,28 @@ import { OAuthStorage } from "./your-storage-implementation";
 
 // Initialize the provider
 const provider = new OAuthProvider({
-  issuer: "https://your-pds.example.com",
-  storage: new OAuthStorage(),
+	issuer: "https://your-pds.example.com",
+	storage: new OAuthStorage(),
 });
 
 // Handle OAuth endpoints in your Worker
 app.post("/oauth/par", async (c) => {
-  const result = await provider.handlePAR(await c.req.formData());
-  return c.json(result);
+	const result = await provider.handlePAR(await c.req.formData());
+	return c.json(result);
 });
 
 app.get("/oauth/authorize", async (c) => {
-  const result = await provider.handleAuthorize(c.req.url);
-  // Show authorization UI to user
-  return c.html(renderAuthUI(result));
+	const result = await provider.handleAuthorize(c.req.url);
+	// Show authorization UI to user
+	return c.html(renderAuthUI(result));
 });
 
 app.post("/oauth/token", async (c) => {
-  const result = await provider.handleToken(
-    await c.req.formData(),
-    c.req.header("DPoP"),
-  );
-  return c.json(result);
+	const result = await provider.handleToken(
+		await c.req.formData(),
+		c.req.header("DPoP"),
+	);
+	return c.json(result);
 });
 ```
 
@@ -72,29 +72,29 @@ The provider uses a storage interface that you implement for your backend:
 
 ```typescript
 export interface OAuthProviderStorage {
-  // Authorization codes
-  saveAuthCode(code: string, data: AuthCodeData): Promise<void>;
-  getAuthCode(code: string): Promise<AuthCodeData | null>;
-  deleteAuthCode(code: string): Promise<void>;
-
-  // Access/refresh tokens
-  saveTokens(data: TokenData): Promise<void>;
-  getTokenByAccess(accessToken: string): Promise<TokenData | null>;
-  getTokenByRefresh(refreshToken: string): Promise<TokenData | null>;
-  revokeToken(accessToken: string): Promise<void>;
-  revokeAllTokens(sub: string): Promise<void>;
-
-  // Client metadata cache
-  saveClient(clientId: string, metadata: ClientMetadata): Promise<void>;
-  getClient(clientId: string): Promise<ClientMetadata | null>;
-
-  // PAR (Pushed Authorization Requests)
-  savePAR(requestUri: string, data: PARData): Promise<void>;
-  getPAR(requestUri: string): Promise<PARData | null>;
-  deletePAR(requestUri: string): Promise<void>;
-
-  // DPoP nonce tracking
-  checkAndSaveNonce(nonce: string): Promise<boolean>;
+	// Authorization codes
+	saveAuthCode(code: string, data: AuthCodeData): Promise<void>;
+	getAuthCode(code: string): Promise<AuthCodeData | null>;
+	deleteAuthCode(code: string): Promise<void>;
+
+	// Access/refresh tokens
+	saveTokens(data: TokenData): Promise<void>;
+	getTokenByAccess(accessToken: string): Promise<TokenData | null>;
+	getTokenByRefresh(refreshToken: string): Promise<TokenData | null>;
+	revokeToken(accessToken: string): Promise<void>;
+	revokeAllTokens(sub: string): Promise<void>;
+
+	// Client metadata cache
+	saveClient(clientId: string, metadata: ClientMetadata): Promise<void>;
+	getClient(clientId: string): Promise<ClientMetadata | null>;
+
+	// PAR (Pushed Authorization Requests)
+	savePAR(requestUri: string, data: PARData): Promise<void>;
+	getPAR(requestUri: string): Promise<PARData | null>;
+	deletePAR(requestUri: string): Promise<void>;
+
+	// DPoP nonce tracking
+	checkAndSaveNonce(nonce: string): Promise<boolean>;
 }
 ```
 
@@ -122,8 +122,8 @@ Response:
 
 ```json
 {
-  "request_uri": "urn:ietf:params:oauth:request_uri:XXXXXX",
-  "expires_in": 90
+	"request_uri": "urn:ietf:params:oauth:request_uri:XXXXXX",
+	"expires_in": 90
 }
 ```
 
@@ -162,12 +162,12 @@ Response:
 
 ```json
 {
-  "access_token": "XXXXXX",
-  "token_type": "DPoP",
-  "expires_in": 3600,
-  "refresh_token": "YYYYYY",
-  "scope": "atproto",
-  "sub": "did:plc:abc123"
+	"access_token": "XXXXXX",
+	"token_type": "DPoP",
+	"expires_in": 3600,
+	"refresh_token": "YYYYYY",
+	"scope": "atproto",
+	"sub": "did:plc:abc123"
 }
 ```
 
@@ -202,14 +202,14 @@ Clients are identified by a URL pointing to their metadata document:
 
 ```json
 {
-  "client_id": "https://client.example.com/client-metadata.json",
-  "client_name": "Example App",
-  "redirect_uris": ["https://client.example.com/callback"],
-  "grant_types": ["authorization_code", "refresh_token"],
-  "response_types": ["code"],
-  "scope": "atproto",
-  "token_endpoint_auth_method": "none",
-  "application_type": "web"
+	"client_id": "https://client.example.com/client-metadata.json",
+	"client_name": "Example App",
+	"redirect_uris": ["https://client.example.com/callback"],
+	"grant_types": ["authorization_code", "refresh_token"],
+	"response_types": ["code"],
+	"scope": "atproto",
+	"token_endpoint_auth_method": "none",
+	"application_type": "web"
 }
 ```
 
@@ -224,15 +224,15 @@ This provider is designed to work seamlessly with `@atproto/oauth-client`:
 import { OAuthClient } from "@atproto/oauth-client";
 
 const client = new OAuthClient({
-  clientMetadata: {
-    client_id: "https://my-app.example.com/client-metadata.json",
-    redirect_uris: ["https://my-app.example.com/callback"],
-  },
+	clientMetadata: {
+		client_id: "https://my-app.example.com/client-metadata.json",
+		redirect_uris: ["https://my-app.example.com/callback"],
+	},
 });
 
 // Initiate login
 const authUrl = await client.authorize("https://user-pds.example.com", {
-  scope: "atproto",
+	scope: "atproto",
 });
 
 // Handle callback
@@ -245,8 +245,8 @@ The provider returns standard OAuth 2.1 error responses:
 
 ```json
 {
-  "error": "invalid_request",
-  "error_description": "Missing required parameter: code_challenge"
+	"error": "invalid_request",
+	"error_description": "Missing required parameter: code_challenge"
 }
 ```
 

packages/oauth-provider/src/client-resolver.ts

@@ -18,7 +18,7 @@ export type { OAuthClientMetadata };
 export class ClientResolutionError extends Error {
 	constructor(
 		message: string,
-		public readonly code: string
+		public readonly code: string,
 	) {
 		super(message);
 		this.name = "ClientResolutionError";
@@ -110,13 +110,17 @@ export class ClientResolver {
 		if (!isHttpsUrl(clientId) && !isValidDid(clientId)) {
 			throw new ClientResolutionError(
 				`Invalid client ID format: ${clientId}`,
-				"invalid_client"
+				"invalid_client",
 			);
 		}
 
 		if (this.storage) {
 			const cached = await this.storage.getClient(clientId);
-			if (cached && cached.cachedAt && Date.now() - cached.cachedAt < this.cacheTtl) {
+			if (
+				cached &&
+				cached.cachedAt &&
+				Date.now() - cached.cachedAt < this.cacheTtl
+			) {
 				return cached;
 			}
 		}
@@ -125,7 +129,7 @@ export class ClientResolver {
 		if (!metadataUrl) {
 			throw new ClientResolutionError(
 				`Unsupported client ID format: ${clientId}`,
-				"invalid_client"
+				"invalid_client",
 			);
 		}
 
@@ -139,14 +143,14 @@ export class ClientResolver {
 		} catch (e) {
 			throw new ClientResolutionError(
 				`Failed to fetch client metadata: ${e}`,
-				"invalid_client"
+				"invalid_client",
 			);
 		}
 
 		if (!response.ok) {
 			throw new ClientResolutionError(
 				`Client metadata fetch failed with status ${response.status}`,
-				"invalid_client"
+				"invalid_client",
 			);
 		}
 
@@ -157,14 +161,14 @@ export class ClientResolver {
 		} catch (e) {
 			throw new ClientResolutionError(
 				`Invalid client metadata: ${e instanceof Error ? e.message : "validation failed"}`,
-				"invalid_client"
+				"invalid_client",
 			);
 		}
 
 		if (doc.client_id !== clientId) {
 			throw new ClientResolutionError(
 				`Client ID mismatch: expected ${clientId}, got ${doc.client_id}`,
-				"invalid_client"
+				"invalid_client",
 			);
 		}
 
@@ -190,7 +194,10 @@ export class ClientResolver {
 	 * @param redirectUri The redirect URI to validate
 	 * @returns true if the redirect URI is allowed
 	 */
-	async validateRedirectUri(clientId: string, redirectUri: string): Promise<boolean> {
+	async validateRedirectUri(
+		clientId: string,
+		redirectUri: string,
+	): Promise<boolean> {
 		try {
 			const metadata = await this.resolveClient(clientId);
 			return metadata.redirectUris.includes(redirectUri);
@@ -203,6 +210,8 @@ export class ClientResolver {
 /**
  * Create a client resolver with optional caching
  */
-export function createClientResolver(options: ClientResolverOptions = {}): ClientResolver {
+export function createClientResolver(
+	options: ClientResolverOptions = {},
+): ClientResolver {
 	return new ClientResolver(options);
 }