storkit: merge 446_story_oauth_login_button_in_web_ui

frontend/src/components/ChatHeader.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import type { OAuthStatus } from "../api/client";
 import { api } from "../api/client";
 
 const { useState, useEffect } = React;
@@ -32,6 +33,7 @@ interface ChatHeaderProps {
 	enableTools: boolean;
 	onToggleTools: (enabled: boolean) => void;
 	wsConnected: boolean;
+	oauthStatus?: OAuthStatus | null;
 }
 
 const getContextEmoji = (percentage: number): string => {
@@ -55,6 +57,7 @@ export function ChatHeader({
 	enableTools,
 	onToggleTools,
 	wsConnected,
+	oauthStatus = null,
 }: ChatHeaderProps) {
 	const hasModelOptions = availableModels.length > 0 || claudeModels.length > 0;
 	const [showConfirm, setShowConfirm] = useState(false);
@@ -340,6 +343,59 @@ export function ChatHeader({
 				</div>
 
 				<div style={{ display: "flex", alignItems: "center", gap: "16px" }}>
+					{oauthStatus !== null &&
+						(!oauthStatus.authenticated || oauthStatus.expired) && (
+							<button
+								type="button"
+								title="Authenticate with Claude via OAuth"
+								onClick={() => {
+									window.open("/oauth/authorize", "_blank", "noopener,noreferrer");
+								}}
+								style={{
+									padding: "6px 12px",
+									borderRadius: "99px",
+									border: "none",
+									fontSize: "0.85em",
+									backgroundColor: "#1a3a5c",
+									color: "#7eb8f7",
+									cursor: "pointer",
+									outline: "none",
+									transition: "all 0.2s",
+									whiteSpace: "nowrap",
+								}}
+								onMouseOver={(e) => {
+									e.currentTarget.style.backgroundColor = "#234d7a";
+									e.currentTarget.style.color = "#a8d4ff";
+								}}
+								onMouseOut={(e) => {
+									e.currentTarget.style.backgroundColor = "#1a3a5c";
+									e.currentTarget.style.color = "#7eb8f7";
+								}}
+								onFocus={(e) => {
+									e.currentTarget.style.backgroundColor = "#234d7a";
+									e.currentTarget.style.color = "#a8d4ff";
+								}}
+								onBlur={(e) => {
+									e.currentTarget.style.backgroundColor = "#1a3a5c";
+									e.currentTarget.style.color = "#7eb8f7";
+								}}
+							>
+								{oauthStatus.expired ? "Re-authenticate" : "Login with Claude"}
+							</button>
+						)}
+					{oauthStatus?.authenticated && !oauthStatus.expired && (
+						<span
+							title="Authenticated with Claude via OAuth"
+							style={{
+								fontSize: "0.8em",
+								color: "#4caf50",
+								whiteSpace: "nowrap",
+							}}
+						>
+							✓ Claude
+						</span>
+					)}
+
 					<div
 						style={{
 							fontSize: "0.75em",