feat(FR-2632): add default fallback and error card UI for STokenLoginBoundary

Replace the placeholder BAICard stub and the ad-hoc Alert-based error
view with the full UI described in spec section '에러 처리 & 기본 에러 카드 UI':

- DefaultFallback: centered BAICard with Spin + localized title and
  description. Shown while the authentication sequence is running.
- DefaultErrorCard: BAICard with status='error' header, translated
  per-kind title and description, and optional cause detail. Actions
  are 'Copy error details' (serializes { kind, cause } to JSON,
  writes to clipboard, toasts a confirmation) and 'Retry' using
  BAIButton's async action prop so the loading state renders
  automatically while the sequence restarts.

i18n keys added under sTokenLoginBoundary.* in en.json and ko.json;
the project's i18n schema only allows two-level nesting so kinds are
mapped to PascalCase suffixes (ErrorMissingTokenTitle etc.) via a
small helper in the component. Other language files will be filled
by /fw:i18n in a follow-up.

Refs FR-2616

Author: nowgnuesLee

react/src/components/STokenLoginBoundary.tsx

@@ -15,8 +15,8 @@ import { createBackendAIClient, tokenLogin } from '../helper/loginSessionAuth';
 import { useResolvedApiEndpoint } from '../hooks/useResolvedApiEndpoint';
 import { loginConfigState } from '../hooks/useWebUIConfig';
 import { jotaiStore } from './DefaultProviders';
-import { Alert, Button, Card } from 'antd';
-import { BAIFlex, useBAILogger } from 'backend.ai-ui';
+import { App, Spin, Typography } from 'antd';
+import { BAIButton, BAICard, BAIFlex, useBAILogger } from 'backend.ai-ui';
 import { useAtomValue } from 'jotai';
 import {
   Suspense,
@@ -226,8 +226,21 @@ const STokenLoginBoundaryInner: React.FC<STokenLoginBoundaryProps> = ({
 };
 
 /**
- * Placeholder connecting card. FR-2632 replaces this with the polished
- * BAICard-based version + i18n keys.
+ * Map an error kind to its PascalCase i18n key suffix. The i18n schema
+ * restricts message keys to a flat two-level shape (`module.Key`) where
+ * `Key` must begin with an uppercase letter, so kinds like
+ * `missing-token` cannot appear verbatim in the key.
+ */
+const kindToI18nKey = (kind: STokenLoginError['kind']): string =>
+  kind
+    .split('-')
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join('');
+
+/**
+ * Connecting card shown while the authentication sequence is in flight.
+ * The card is visually subdued so reviewers can tell the app is still
+ * working but hasn't failed.
  */
 const DefaultFallback: React.FC = () => {
   const { t } = useTranslation();
@@ -236,41 +249,100 @@ const DefaultFallback: React.FC = () => {
       direction="column"
       align="center"
       justify="center"
-      style={{ minHeight: '60vh' }}
+      style={{ minHeight: '60vh', padding: 24 }}
     >
-      <Card>{t('login.ConnectingToCluster')}</Card>
+      <BAICard
+        style={{ maxWidth: 480, width: '100%', textAlign: 'center' }}
+        bordered
+      >
+        <BAIFlex direction="column" align="center" gap="md">
+          <Spin size="large" />
+          <Typography.Title level={5} style={{ margin: 0 }}>
+            {t('sTokenLoginBoundary.AuthenticatingTitle')}
+          </Typography.Title>
+          <Typography.Text type="secondary">
+            {t('sTokenLoginBoundary.AuthenticatingDescription')}
+          </Typography.Text>
+        </BAIFlex>
+      </BAICard>
     </BAIFlex>
   );
 };
 
 /**
- * Placeholder error card. FR-2632 replaces this with the full BAICard +
- * BAIButton UI (Retry with async loading state, Copy error details).
+ * Built-in error card rendered when `errorFallback` is not provided.
+ * Offers two actions: Retry (runs the sequence again via BAIButton's
+ * async `action` prop so the loading state appears automatically) and
+ * Copy details (serializes the `{ kind, cause }` payload to JSON and
+ * writes it to the clipboard for support follow-up).
  */
 const DefaultErrorCard: React.FC<{
   error: STokenLoginError;
   onRetry: () => void;
 }> = ({ error, onRetry }) => {
+  const { t } = useTranslation();
+  const { message } = App.useApp();
+
+  const kindKey = kindToI18nKey(error.kind);
+  const title = t(`sTokenLoginBoundary.Error${kindKey}Title`);
+  const description = t(`sTokenLoginBoundary.Error${kindKey}Description`);
+  const causeDetail =
+    'cause' in error && error.cause
+      ? String((error.cause as Error)?.message ?? error.cause)
+      : null;
+
+  const handleRetry = useCallback(async () => {
+    // Wrap in a Promise so BAIButton.action triggers its async loading
+    // state; the synchronous state reset completes before the next
+    // render, which is visually indistinguishable from the live
+    // sequence restart.
+    await Promise.resolve();
+    onRetry();
+  }, [onRetry]);
+
+  const handleCopy = useCallback(async () => {
+    const payload = {
+      kind: error.kind,
+      cause: causeDetail,
+    };
+    await navigator.clipboard.writeText(JSON.stringify(payload, null, 2));
+    message.success(t('sTokenLoginBoundary.ErrorDetailsCopied'));
+  }, [error, causeDetail, message, t]);
+
   return (
     <BAIFlex
       direction="column"
       align="center"
       justify="center"
       style={{ minHeight: '60vh', padding: 24 }}
     >
-      <Alert
-        type="error"
-        title={`sToken login failed: ${error.kind}`}
-        description={
-          'cause' in error && error.cause
-            ? String((error.cause as Error)?.message ?? error.cause)
-            : undefined
-        }
-        style={{ maxWidth: 520, marginBottom: 16 }}
-      />
-      <Button type="primary" onClick={onRetry}>
-        Retry
-      </Button>
+      <BAICard
+        status="error"
+        title={title}
+        style={{ maxWidth: 520, width: '100%' }}
+      >
+        <BAIFlex direction="column" gap="md" align="stretch">
+          <Typography.Paragraph style={{ margin: 0 }}>
+            {description}
+          </Typography.Paragraph>
+          {causeDetail && (
+            <Typography.Paragraph
+              type="secondary"
+              style={{ margin: 0, fontSize: 12, whiteSpace: 'pre-wrap' }}
+            >
+              {causeDetail}
+            </Typography.Paragraph>
+          )}
+          <BAIFlex direction="row" gap="sm" justify="end">
+            <BAIButton onClick={handleCopy}>
+              {t('sTokenLoginBoundary.CopyErrorDetails')}
+            </BAIButton>
+            <BAIButton type="primary" action={handleRetry}>
+              {t('sTokenLoginBoundary.Retry')}
+            </BAIButton>
+          </BAIFlex>
+        </BAIFlex>
+      </BAICard>
     </BAIFlex>
   );
 };

resources/i18n/en.json

@@ -2076,6 +2076,25 @@
     "SharedMemory": "Shared Memory",
     "Updated": "Resource preset updated"
   },
+  "sTokenLoginBoundary": {
+    "AuthenticatingDescription": "Authenticating with your single sign-on token. This usually takes only a moment.",
+    "AuthenticatingTitle": "Signing you in",
+    "CopyErrorDetails": "Copy error details",
+    "ErrorConcurrentSessionDescription": "This account is already signed in somewhere else. Please close the other session and try again.",
+    "ErrorConcurrentSessionTitle": "Another active session was detected.",
+    "ErrorDetailsCopied": "Error details copied to clipboard.",
+    "ErrorEndpointUnresolvedDescription": "The Backend.AI server address could not be resolved from the configuration file. Please try again in a moment or contact your administrator.",
+    "ErrorEndpointUnresolvedTitle": "Server configuration is unavailable.",
+    "ErrorMissingTokenDescription": "The sign-in token is missing from the request. Try opening the link again from your original source, or contact your administrator.",
+    "ErrorMissingTokenTitle": "No sign-in token was provided.",
+    "ErrorServerUnreachableDescription": "The server did not respond to the initial connection. Check your network and try again.",
+    "ErrorServerUnreachableTitle": "Cannot reach the Backend.AI server.",
+    "ErrorTokenInvalidDescription": "The sign-in token may have expired or been revoked. Please restart the sign-in flow from your original application.",
+    "ErrorTokenInvalidTitle": "Your sign-in token is not valid.",
+    "ErrorUnknownDescription": "An unexpected error occurred while signing in. Please try again, and copy the error details below if the problem persists.",
+    "ErrorUnknownTitle": "Sign-in failed unexpectedly.",
+    "Retry": "Retry"
+  },
   "scanArtifactModelsFromHuggingFaceModal": {
     "EnterAModelID": "Enter a model ID. (e.g. openai/gpt-oss-20b)",
     "EnterAVersion": "Enter a version. (default: main)",

resources/i18n/ko.json

@@ -2078,6 +2078,25 @@
     "SharedMemory": "공유 메모리",
     "Updated": "자원 프리셋이 수정되었습니다"
   },
+  "sTokenLoginBoundary": {
+    "AuthenticatingDescription": "싱글 사인온 토큰으로 로그인하고 있습니다. 잠시만 기다려 주세요.",
+    "AuthenticatingTitle": "로그인 중",
+    "CopyErrorDetails": "오류 세부 정보 복사",
+    "ErrorConcurrentSessionDescription": "다른 곳에서 이미 로그인되어 있습니다. 해당 세션을 종료한 뒤 다시 시도해 주세요.",
+    "ErrorConcurrentSessionTitle": "이미 다른 세션에서 로그인된 상태입니다.",
+    "ErrorDetailsCopied": "오류 세부 정보가 클립보드에 복사되었습니다.",
+    "ErrorEndpointUnresolvedDescription": "구성 파일에서 Backend.AI 서버 주소를 확인하지 못했습니다. 잠시 후 다시 시도하거나 관리자에게 문의하세요.",
+    "ErrorEndpointUnresolvedTitle": "서버 설정을 불러올 수 없습니다.",
+    "ErrorMissingTokenDescription": "요청에 로그인 토큰이 포함되어 있지 않습니다. 원래 링크를 다시 열거나 관리자에게 문의하세요.",
+    "ErrorMissingTokenTitle": "로그인 토큰이 없습니다.",
+    "ErrorServerUnreachableDescription": "초기 연결에 서버가 응답하지 않았습니다. 네트워크 상태를 확인한 뒤 다시 시도하세요.",
+    "ErrorServerUnreachableTitle": "Backend.AI 서버에 연결할 수 없습니다.",
+    "ErrorTokenInvalidDescription": "로그인 토큰이 만료되었거나 해지되었을 수 있습니다. 원래 애플리케이션에서 로그인 절차를 다시 시작해 주세요.",
+    "ErrorTokenInvalidTitle": "로그인 토큰이 유효하지 않습니다.",
+    "ErrorUnknownDescription": "로그인 중 알 수 없는 오류가 발생했습니다. 다시 시도해 주시고, 문제가 계속되면 아래 오류 세부 정보를 복사해 전달해 주세요.",
+    "ErrorUnknownTitle": "로그인 중 예기치 않은 오류가 발생했습니다.",
+    "Retry": "다시 시도"
+  },
   "scanArtifactModelsFromHuggingFaceModal": {
     "EnterAModelID": "모델 ID를 입력하십시오. (예 : openai/gpt-oss-20b)",
     "EnterAVersion": "버전을 입력하십시오. (기본값 : main)",