feat(coding-agent): add OAuth authentication for Claude Pro/Max

- Add /login and /logout commands for OAuth flow - OAuth tokens stored in ~/.pi/agent/oauth.json with 0600 permissions - Auto-refresh tokens when expired (5min buffer) - Priority: OAuth > ANTHROPIC_OAUTH_TOKEN env > ANTHROPIC_API_KEY env - Fix model selector async loading and re-render - Add bracketed paste support to Input component for long codes - Update README.md with OAuth documentation - Add implementation docs and testing checklist
2025-11-18 17:33:33 +01:00
parent 387cc97bac
commit 587d7c39a4
17 changed files with 1632 additions and 76 deletions
--- a/packages/coding-agent/src/tui/oauth-selector.ts
+++ b/packages/coding-agent/src/tui/oauth-selector.ts
@@ -0,0 +1,107 @@
+import { Container, Spacer, Text } from "@mariozechner/pi-tui";
+import chalk from "chalk";
+import { getOAuthProviders, type OAuthProviderInfo } from "../oauth/index.js";
+
+/**
+ * Component that renders an OAuth provider selector
+ */
+export class OAuthSelectorComponent extends Container {
+	private listContainer: Container;
+	private allProviders: OAuthProviderInfo[] = [];
+	private selectedIndex: number = 0;
+	private mode: "login" | "logout";
+	private onSelectCallback: (providerId: string) => void;
+	private onCancelCallback: () => void;
+
+	constructor(mode: "login" | "logout", onSelect: (providerId: string) => void, onCancel: () => void) {
+		super();
+
+		this.mode = mode;
+		this.onSelectCallback = onSelect;
+		this.onCancelCallback = onCancel;
+
+		// Load all OAuth providers
+		this.loadProviders();
+
+		// Add top border
+		this.addChild(new Text(chalk.blue("─".repeat(80)), 0, 0));
+		this.addChild(new Spacer(1));
+
+		// Add title
+		const title = mode === "login" ? "Select provider to login:" : "Select provider to logout:";
+		this.addChild(new Text(chalk.bold(title), 0, 0));
+		this.addChild(new Spacer(1));
+
+		// Create list container
+		this.listContainer = new Container();
+		this.addChild(this.listContainer);
+
+		this.addChild(new Spacer(1));
+
+		// Add bottom border
+		this.addChild(new Text(chalk.blue("─".repeat(80)), 0, 0));
+
+		// Initial render
+		this.updateList();
+	}
+
+	private loadProviders(): void {
+		this.allProviders = getOAuthProviders();
+		this.allProviders = this.allProviders.filter((p) => p.available);
+	}
+
+	private updateList(): void {
+		this.listContainer.clear();
+
+		for (let i = 0; i < this.allProviders.length; i++) {
+			const provider = this.allProviders[i];
+			if (!provider) continue;
+
+			const isSelected = i === this.selectedIndex;
+			const isAvailable = provider.available;
+
+			let line = "";
+			if (isSelected) {
+				const prefix = chalk.blue("→ ");
+				const text = isAvailable ? chalk.blue(provider.name) : chalk.dim(provider.name);
+				line = prefix + text;
+			} else {
+				const text = isAvailable ? `  ${provider.name}` : chalk.dim(`  ${provider.name}`);
+				line = text;
+			}
+
+			this.listContainer.addChild(new Text(line, 0, 0));
+		}
+
+		// Show "no providers" if empty
+		if (this.allProviders.length === 0) {
+			const message =
+				this.mode === "login" ? "No OAuth providers available" : "No OAuth providers logged in. Use /login first.";
+			this.listContainer.addChild(new Text(chalk.gray(`  ${message}`), 0, 0));
+		}
+	}
+
+	handleInput(keyData: string): void {
+		// Up arrow
+		if (keyData === "\x1b[A") {
+			this.selectedIndex = Math.max(0, this.selectedIndex - 1);
+			this.updateList();
+		}
+		// Down arrow
+		else if (keyData === "\x1b[B") {
+			this.selectedIndex = Math.min(this.allProviders.length - 1, this.selectedIndex + 1);
+			this.updateList();
+		}
+		// Enter
+		else if (keyData === "\r") {
+			const selectedProvider = this.allProviders[this.selectedIndex];
+			if (selectedProvider?.available) {
+				this.onSelectCallback(selectedProvider.id);
+			}
+		}
+		// Escape
+		else if (keyData === "\x1b") {
+			this.onCancelCallback();
+		}
+	}
+}