storkit: merge 446_story_oauth_login_button_in_web_ui

frontend/src/components/selection/SelectionScreen.tsx

@@ -1,4 +1,5 @@
 import type { KeyboardEvent } from "react";
+import type { OAuthStatus } from "../../api/client";
 import { ProjectPathInput } from "./ProjectPathInput.tsx";
 import { RecentProjectsList } from "./RecentProjectsList.tsx";
 
@@ -24,6 +25,7 @@ export interface SelectionScreenProps {
 	onCloseSuggestions: () => void;
 	completionError: string | null;
 	currentPartial: string;
+	oauthStatus?: OAuthStatus | null;
 }
 
 export function SelectionScreen({
@@ -43,6 +45,7 @@ export function SelectionScreen({
 	onCloseSuggestions,
 	completionError,
 	currentPartial,
+	oauthStatus = null,
 }: SelectionScreenProps) {
 	const resolvedHomeDir = homeDir
 		? homeDir.endsWith("/")
@@ -57,6 +60,37 @@ export function SelectionScreen({
 			<h1>Storkit</h1>
 			<p>Paste or complete a project path to start.</p>
 
+			{oauthStatus !== null && (
+				<div style={{ marginBottom: "1rem" }}>
+					{!oauthStatus.authenticated || oauthStatus.expired ? (
+						<button
+							type="button"
+							onClick={() => {
+								window.open("/oauth/authorize", "_blank", "noopener,noreferrer");
+							}}
+							style={{
+								padding: "8px 16px",
+								borderRadius: "6px",
+								border: "1px solid #1a3a5c",
+								backgroundColor: "#1a3a5c",
+								color: "#7eb8f7",
+								cursor: "pointer",
+								fontSize: "0.9em",
+							}}
+						>
+							{oauthStatus.expired ? "Re-authenticate with Claude" : "Login with Claude"}
+						</button>
+					) : (
+						<span
+							title="Authenticated with Claude via OAuth"
+							style={{ color: "#4caf50", fontSize: "0.9em" }}
+						>
+							✓ Authenticated with Claude
+						</span>
+					)}
+				</div>
+			)}
+
 			{knownProjects.length > 0 && (
 				<RecentProjectsList
 					projects={knownProjects}