@nextclaw/ui 0.6.6 → 0.6.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextclaw/ui",
-  "version": "0.6.6",
+  "version": "0.6.7",
   "private": false,
   "type": "module",
   "license": "MIT",

package/src/api/config.ts

@@ -1,5 +1,6 @@
 import { api, API_BASE } from './client';
 import type {
+  AppMetaView,
   ConfigView,
   ConfigMetaView,
   ConfigSchemaResponse,
@@ -8,6 +9,10 @@ import type {
   ProviderConfigUpdate,
   ProviderConnectionTestRequest,
   ProviderConnectionTestResult,
+  ProviderAuthStartResult,
+  ProviderAuthPollRequest,
+  ProviderAuthPollResult,
+  ProviderAuthImportResult,
   ProviderCreateRequest,
   ProviderCreateResult,
   ProviderDeleteResult,
@@ -36,6 +41,15 @@ import type {
   ChatTurnStreamSessionEvent
 } from './types';
 
+// GET /api/app/meta
+export async function fetchAppMeta(): Promise<AppMetaView> {
+  const response = await api.get<AppMetaView>('/api/app/meta');
+  if (!response.ok) {
+    throw new Error(response.error.message);
+  }
+  return response.data;
+}
+
 // GET /api/config
 export async function fetchConfig(): Promise<ConfigView> {
   const response = await api.get<ConfigView>('/api/config');
@@ -129,6 +143,45 @@ export async function testProviderConnection(
   return response.data;
 }
 
+// POST /api/config/providers/:provider/auth/start
+export async function startProviderAuth(provider: string): Promise<ProviderAuthStartResult> {
+  const response = await api.post<ProviderAuthStartResult>(
+    `/api/config/providers/${provider}/auth/start`,
+    {}
+  );
+  if (!response.ok) {
+    throw new Error(response.error.message);
+  }
+  return response.data;
+}
+
+// POST /api/config/providers/:provider/auth/poll
+export async function pollProviderAuth(
+  provider: string,
+  data: ProviderAuthPollRequest
+): Promise<ProviderAuthPollResult> {
+  const response = await api.post<ProviderAuthPollResult>(
+    `/api/config/providers/${provider}/auth/poll`,
+    data
+  );
+  if (!response.ok) {
+    throw new Error(response.error.message);
+  }
+  return response.data;
+}
+
+// POST /api/config/providers/:provider/auth/import-cli
+export async function importProviderAuthFromCli(provider: string): Promise<ProviderAuthImportResult> {
+  const response = await api.post<ProviderAuthImportResult>(
+    `/api/config/providers/${provider}/auth/import-cli`,
+    {}
+  );
+  if (!response.ok) {
+    throw new Error(response.error.message);
+  }
+  return response.data;
+}
+
 // PUT /api/config/channels/:channel
 export async function updateChannel(
   channel: string,

package/src/api/types.ts

@@ -9,6 +9,11 @@ export type ApiResponse<T> =
   | { ok: true; data: T }
   | { ok: false; error: ApiError };
 
+export type AppMetaView = {
+  name: string;
+  productVersion: string;
+};
+
 export type ProviderConfigView = {
   displayName?: string;
   apiKeySet: boolean;
@@ -69,6 +74,35 @@ export type ProviderConnectionTestResult = {
   hint?: string;
 };
 
+export type ProviderAuthStartResult = {
+  provider: string;
+  kind: "device_code";
+  sessionId: string;
+  verificationUri: string;
+  userCode: string;
+  expiresAt: string;
+  intervalMs: number;
+  note?: string;
+};
+
+export type ProviderAuthPollRequest = {
+  sessionId: string;
+};
+
+export type ProviderAuthPollResult = {
+  provider: string;
+  status: "pending" | "authorized" | "denied" | "expired" | "error";
+  message?: string;
+  nextPollMs?: number;
+};
+
+export type ProviderAuthImportResult = {
+  provider: string;
+  status: "imported";
+  source: "cli";
+  expiresAt?: string;
+};
+
 export type AgentProfileView = {
   id: string;
   default?: boolean;
@@ -394,6 +428,20 @@ export type ProviderSpecView = {
   isGateway?: boolean;
   isLocal?: boolean;
   defaultApiBase?: string;
+  logo?: string;
+  apiBaseHelp?: {
+    en?: string;
+    zh?: string;
+  };
+  auth?: {
+    kind: "device_code";
+    displayName?: string;
+    note?: {
+      en?: string;
+      zh?: string;
+    };
+    supportsCliImport?: boolean;
+  };
   defaultModels?: string[];
   supportsWireApi?: boolean;
   wireApiOptions?: Array<"auto" | "chat" | "responses">;

package/src/components/chat/ChatPage.tsx

@@ -20,6 +20,7 @@ import { MarketplacePage } from '@/components/marketplace/MarketplacePage';
 import { useChatStreamController } from '@/components/chat/useChatStreamController';
 import { buildFallbackEventsFromMessages } from '@/lib/chat-message';
 import { buildProviderModelCatalog, composeProviderModel } from '@/lib/provider-models';
+import { buildActiveRunBySessionKey, buildSessionRunStatusByKey } from '@/lib/session-run-status';
 import { t } from '@/lib/i18n';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
 
@@ -351,22 +352,28 @@ export function ChatPage({ view }: ChatPageProps) {
     refetchHistory: historyQuery.refetch
   });
 
-  const activeRunsQuery = useChatRuns(
-    selectedSessionKey
+  const sessionStatusRunsQuery = useChatRuns(
+    view === 'chat'
       ? {
-          sessionKey: selectedSessionKey,
           states: ['queued', 'running'],
-          limit: 5
+          limit: 200
         }
       : undefined
   );
+  const activeRunBySessionKey = useMemo(
+    () => buildActiveRunBySessionKey(sessionStatusRunsQuery.data?.runs ?? []),
+    [sessionStatusRunsQuery.data?.runs]
+  );
+  const sessionRunStatusByKey = useMemo(
+    () => buildSessionRunStatusByKey(activeRunBySessionKey),
+    [activeRunBySessionKey]
+  );
   const activeRun = useMemo(() => {
-    const candidates = activeRunsQuery.data?.runs ?? [];
     if (!selectedSessionKey) {
       return null;
     }
-    return candidates.find((entry) => entry.sessionKey === selectedSessionKey) ?? null;
-  }, [activeRunsQuery.data?.runs, selectedSessionKey]);
+    return activeRunBySessionKey.get(selectedSessionKey) ?? null;
+  }, [activeRunBySessionKey, selectedSessionKey]);
 
   useEffect(() => {
     if (view !== 'chat' || !selectedSessionKey || !activeRun) {
@@ -513,6 +520,7 @@ export function ChatPage({ view }: ChatPageProps) {
 
   const sidebarProps: ComponentProps<typeof ChatSidebar> = {
     sessions,
+    sessionRunStatusByKey,
     selectedSessionKey,
     onSelectSession: handleSelectSession,
     onCreateSession: createNewSession,

package/src/components/chat/ChatSidebar.tsx

@@ -1,10 +1,13 @@
 import { useMemo } from 'react';
 import type { SessionEntryView } from '@/api/types';
 import { Button } from '@/components/ui/button';
+import { BrandHeader } from '@/components/common/BrandHeader';
 import { Input } from '@/components/ui/input';
 import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select';
+import { SessionRunBadge } from '@/components/common/SessionRunBadge';
 import { cn } from '@/lib/utils';
 import { LANGUAGE_OPTIONS, formatDateTime, t, type I18nLanguage } from '@/lib/i18n';
+import type { SessionRunStatus } from '@/lib/session-run-status';
 import { THEME_OPTIONS, type UiTheme } from '@/lib/theme';
 import { useI18n } from '@/components/providers/I18nProvider';
 import { useTheme } from '@/components/providers/ThemeProvider';
@@ -13,6 +16,7 @@ import { AlarmClock, BrainCircuit, Languages, MessageSquareText, Palette, Plus,
 
 type ChatSidebarProps = {
   sessions: SessionEntryView[];
+  sessionRunStatusByKey: ReadonlyMap<string, SessionRunStatus>;
   selectedSessionKey: string | null;
   onSelectSession: (key: string) => void;
   onCreateSession: () => void;
@@ -82,12 +86,7 @@ export function ChatSidebar(props: ChatSidebarProps) {
     <aside className="w-[280px] shrink-0 flex flex-col h-full bg-secondary border-r border-gray-200/60">
       {/* Logo */}
       <div className="px-5 pt-5 pb-3">
-        <div className="flex items-center gap-2.5">
-          <div className="h-7 w-7 rounded-lg overflow-hidden flex items-center justify-center">
-            <img src="/logo.svg" alt="NextClaw" className="h-full w-full object-contain" />
-          </div>
-          <span className="text-[15px] font-semibold text-gray-800 tracking-[-0.01em]">NextClaw</span>
-        </div>
+        <BrandHeader />
       </div>
 
       {/* New Task button */}
@@ -165,6 +164,7 @@ export function ChatSidebar(props: ChatSidebarProps) {
                 <div className="space-y-0.5">
                   {group.sessions.map((session) => {
                     const active = props.selectedSessionKey === session.key;
+                    const runStatus = props.sessionRunStatusByKey.get(session.key);
                     return (
                       <button
                         key={session.key}
@@ -176,7 +176,12 @@ export function ChatSidebar(props: ChatSidebarProps) {
                             : 'text-gray-700 hover:bg-gray-200/60 hover:text-gray-900'
                         )}
                       >
-                        <div className="truncate font-medium">{props.sessionTitle(session)}</div>
+                        <div className="grid grid-cols-[minmax(0,1fr)_0.875rem] items-center gap-1.5">
+                          <span className="truncate font-medium">{props.sessionTitle(session)}</span>
+                          <span className="inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center">
+                            {runStatus ? <SessionRunBadge status={runStatus} /> : null}
+                          </span>
+                        </div>
                         <div className="mt-0.5 text-[11px] text-gray-400 truncate">
                           {session.messageCount} · {formatDateTime(session.updatedAt)}
                         </div>

package/src/components/common/BrandHeader.tsx

@@ -0,0 +1,23 @@
+import { useAppMeta } from '@/hooks/useConfig';
+
+type BrandHeaderProps = {
+  className?: string;
+};
+
+export function BrandHeader({ className }: BrandHeaderProps) {
+  const { data } = useAppMeta();
+  const productName = data?.name ?? 'NextClaw';
+  const productVersion = data?.productVersion?.trim();
+
+  return (
+    <div className={className ?? 'flex items-center gap-2.5'}>
+      <div className="h-7 w-7 rounded-lg overflow-hidden flex items-center justify-center">
+        <img src="/logo.svg" alt={productName} className="h-full w-full object-contain" />
+      </div>
+      <div className="flex items-baseline gap-2 min-w-0">
+        <span className="truncate text-[15px] font-semibold tracking-[-0.01em] text-gray-800">{productName}</span>
+        {productVersion ? <span className="text-[13px] font-medium text-gray-500">v{productVersion}</span> : null}
+      </div>
+    </div>
+  );
+}

package/src/components/common/SessionRunBadge.tsx

@@ -0,0 +1,23 @@
+import { Loader2 } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { t } from '@/lib/i18n';
+import type { SessionRunStatus } from '@/lib/session-run-status';
+
+type SessionRunBadgeProps = {
+  status: SessionRunStatus;
+  className?: string;
+};
+
+export function SessionRunBadge({ status, className }: SessionRunBadgeProps) {
+  const label = status === 'running' ? t('sessionsRunStatusRunning') : t('sessionsRunStatusQueued');
+  return (
+    <span
+      className={cn('inline-flex h-3.5 w-3.5 items-center justify-center text-gray-400', className)}
+      title={label}
+      aria-label={label}
+    >
+      <Loader2 className="h-3 w-3 animate-spin" />
+      <span className="sr-only">{label}</span>
+    </span>
+  );
+}

package/src/components/config/ProviderForm.tsx

@@ -1,9 +1,13 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
 import {
   useConfig,
   useConfigMeta,
   useConfigSchema,
   useDeleteProvider,
+  useImportProviderAuthFromCli,
+  usePollProviderAuth,
+  useStartProviderAuth,
   useTestProviderConnection,
   useUpdateProvider
 } from '@/hooks/useConfig';
@@ -14,9 +18,9 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
 import { MaskedInput } from '@/components/common/MaskedInput';
 import { KeyValueEditor } from '@/components/common/KeyValueEditor';
 import { StatusDot } from '@/components/ui/status-dot';
-import { t } from '@/lib/i18n';
+import { getLanguage, t } from '@/lib/i18n';
 import { hintForPath } from '@/lib/config-hints';
-import type { ProviderConfigUpdate, ProviderConnectionTestRequest } from '@/api/types';
+import type { ProviderConfigView, ProviderConfigUpdate, ProviderConnectionTestRequest } from '@/api/types';
 import { CircleDotDashed, Plus, X, Trash2, ChevronDown, Settings2 } from 'lucide-react';
 import { toast } from 'sonner';
 import { CONFIG_DETAIL_CARD_CLASS, CONFIG_EMPTY_DETAIL_CARD_CLASS } from './config-layout';
@@ -28,6 +32,16 @@ type ProviderFormProps = {
   onProviderDeleted?: (providerName: string) => void;
 };
 
+const EMPTY_PROVIDER_CONFIG: ProviderConfigView = {
+  displayName: '',
+  apiKeySet: false,
+  apiKeyMasked: undefined,
+  apiBase: null,
+  extraHeaders: null,
+  wireApi: null,
+  models: []
+};
+
 function normalizeHeaders(input: Record<string, string> | null | undefined): Record<string, string> | null {
   if (!input) {
     return null;
@@ -138,12 +152,16 @@ function serializeModelsForSave(models: string[], defaultModels: string[]): stri
 }
 
 export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormProps) {
+  const queryClient = useQueryClient();
   const { data: config } = useConfig();
   const { data: meta } = useConfigMeta();
   const { data: schema } = useConfigSchema();
   const updateProvider = useUpdateProvider();
   const deleteProvider = useDeleteProvider();
   const testProviderConnection = useTestProviderConnection();
+  const startProviderAuth = useStartProviderAuth();
+  const pollProviderAuth = usePollProviderAuth();
+  const importProviderAuthFromCli = useImportProviderAuthFromCli();
 
   const [apiKey, setApiKey] = useState('');
   const [apiBase, setApiBase] = useState('');
@@ -154,9 +172,13 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
   const [providerDisplayName, setProviderDisplayName] = useState('');
   const [showAdvanced, setShowAdvanced] = useState(false);
   const [showModelInput, setShowModelInput] = useState(false);
+  const [authSessionId, setAuthSessionId] = useState<string | null>(null);
+  const [authStatusMessage, setAuthStatusMessage] = useState('');
+  const authPollTimerRef = useRef<number | null>(null);
 
   const providerSpec = meta?.providers.find((p) => p.name === providerName);
   const providerConfig = providerName ? config?.providers[providerName] : null;
+  const resolvedProviderConfig = providerConfig ?? EMPTY_PROVIDER_CONFIG;
   const uiHints = schema?.uiHints;
   const isCustomProvider = Boolean(providerSpec?.isCustom);
 
@@ -165,7 +187,7 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
   const extraHeadersHint = providerName ? hintForPath(`providers.${providerName}.extraHeaders`, uiHints) : undefined;
   const wireApiHint = providerName ? hintForPath(`providers.${providerName}.wireApi`, uiHints) : undefined;
   const defaultDisplayName = providerSpec?.displayName || providerName || '';
-  const currentDisplayName = (providerConfig?.displayName || '').trim();
+  const currentDisplayName = (resolvedProviderConfig.displayName || '').trim();
   const effectiveDisplayName = currentDisplayName || defaultDisplayName;
 
   const providerTitle = providerDisplayName.trim() || effectiveDisplayName || providerName || t('providersSelectPlaceholder');
@@ -175,9 +197,9 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
     [providerModelPrefix, providerName]
   );
   const defaultApiBase = providerSpec?.defaultApiBase || '';
-  const currentApiBase = providerConfig?.apiBase || defaultApiBase;
-  const currentHeaders = normalizeHeaders(providerConfig?.extraHeaders || null);
-  const currentWireApi = (providerConfig?.wireApi || providerSpec?.defaultWireApi || 'auto') as WireApiType;
+  const currentApiBase = resolvedProviderConfig.apiBase || defaultApiBase;
+  const currentHeaders = normalizeHeaders(resolvedProviderConfig.extraHeaders || null);
+  const currentWireApi = (resolvedProviderConfig.wireApi || providerSpec?.defaultWireApi || 'auto') as WireApiType;
   const defaultModels = useMemo(
     () =>
       normalizeModelList(
@@ -188,17 +210,74 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
   const currentModels = useMemo(
     () =>
       normalizeModelList(
-        (providerConfig?.models ?? []).map((model) => toProviderLocalModelId(model, providerModelAliases))
+        (resolvedProviderConfig.models ?? []).map((model) => toProviderLocalModelId(model, providerModelAliases))
       ),
-    [providerConfig?.models, providerModelAliases]
+    [resolvedProviderConfig.models, providerModelAliases]
   );
   const currentEditableModels = useMemo(
     () => resolveEditableModels(defaultModels, currentModels),
     [defaultModels, currentModels]
   );
-  const apiBaseHelpText = providerName === 'minimax'
-    ? t('providerApiBaseHelpMinimax')
-    : (apiBaseHint?.help || t('providerApiBaseHelp'));
+  const language = getLanguage();
+  const apiBaseHelpText =
+    providerSpec?.apiBaseHelp?.[language] ||
+    providerSpec?.apiBaseHelp?.en ||
+    apiBaseHint?.help ||
+    t('providerApiBaseHelp');
+  const providerAuth = providerSpec?.auth;
+  const providerAuthNote =
+    providerAuth?.note?.[language] ||
+    providerAuth?.note?.en ||
+    providerAuth?.displayName ||
+    '';
+
+  const clearAuthPollTimer = useCallback(() => {
+    if (authPollTimerRef.current !== null) {
+      window.clearTimeout(authPollTimerRef.current);
+      authPollTimerRef.current = null;
+    }
+  }, []);
+
+  const scheduleProviderAuthPoll = useCallback((sessionId: string, delayMs: number) => {
+    clearAuthPollTimer();
+    authPollTimerRef.current = window.setTimeout(() => {
+      void (async () => {
+        if (!providerName) {
+          return;
+        }
+        try {
+          const result = await pollProviderAuth.mutateAsync({
+            provider: providerName,
+            data: { sessionId }
+          });
+          if (result.status === 'pending') {
+            setAuthStatusMessage(t('providerAuthWaitingBrowser'));
+            scheduleProviderAuthPoll(sessionId, result.nextPollMs ?? delayMs);
+            return;
+          }
+          if (result.status === 'authorized') {
+            setAuthSessionId(null);
+            clearAuthPollTimer();
+            setAuthStatusMessage(t('providerAuthCompleted'));
+            toast.success(t('providerAuthCompleted'));
+            queryClient.invalidateQueries({ queryKey: ['config'] });
+            queryClient.invalidateQueries({ queryKey: ['config-meta'] });
+            return;
+          }
+          setAuthSessionId(null);
+          clearAuthPollTimer();
+          setAuthStatusMessage(result.message || `Authorization ${result.status}.`);
+          toast.error(result.message || `Authorization ${result.status}.`);
+        } catch (error) {
+          setAuthSessionId(null);
+          clearAuthPollTimer();
+          const message = error instanceof Error ? error.message : String(error);
+          setAuthStatusMessage(message);
+          toast.error(`Authorization failed: ${message}`);
+        }
+      })();
+    }, Math.max(1000, delayMs));
+  }, [clearAuthPollTimer, pollProviderAuth, providerName, queryClient]);
 
   useEffect(() => {
     if (!providerName) {
@@ -209,17 +288,25 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
       setModels([]);
       setModelDraft('');
       setProviderDisplayName('');
+      setAuthSessionId(null);
+      setAuthStatusMessage('');
+      clearAuthPollTimer();
       return;
     }
 
     setApiKey('');
     setApiBase(currentApiBase);
-    setExtraHeaders(providerConfig?.extraHeaders || null);
+    setExtraHeaders(resolvedProviderConfig.extraHeaders || null);
     setWireApi(currentWireApi);
     setModels(currentEditableModels);
     setModelDraft('');
     setProviderDisplayName(effectiveDisplayName);
-  }, [providerName, currentApiBase, providerConfig?.extraHeaders, currentWireApi, currentEditableModels, effectiveDisplayName]);
+    setAuthSessionId(null);
+    setAuthStatusMessage('');
+    clearAuthPollTimer();
+  }, [providerName, currentApiBase, resolvedProviderConfig.extraHeaders, currentWireApi, currentEditableModels, effectiveDisplayName, clearAuthPollTimer]);
+
+  useEffect(() => () => clearAuthPollTimer(), [clearAuthPollTimer]);
 
   const hasChanges = useMemo(() => {
     if (!providerName) {
@@ -252,16 +339,6 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
     currentEditableModels
   ]);
 
-  const resetToDefault = () => {
-    setApiKey('');
-    setApiBase(defaultApiBase);
-    setExtraHeaders(null);
-    setWireApi((providerSpec?.defaultWireApi || 'auto') as WireApiType);
-    setModels(defaultModels);
-    setModelDraft('');
-    setProviderDisplayName(defaultDisplayName);
-  };
-
   const handleAddModel = () => {
     const next = toProviderLocalModelId(modelDraft, providerModelAliases);
     if (!next) {
@@ -369,7 +446,51 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
     }
   };
 
-  if (!providerName || !providerSpec || !providerConfig) {
+  const handleStartProviderAuth = async () => {
+    if (!providerName || providerAuth?.kind !== 'device_code') {
+      return;
+    }
+
+    try {
+      setAuthStatusMessage('');
+      const result = await startProviderAuth.mutateAsync({ provider: providerName });
+      if (!result.sessionId || !result.verificationUri) {
+        throw new Error(t('providerAuthStartFailed'));
+      }
+      setAuthSessionId(result.sessionId);
+      setAuthStatusMessage(`${t('providerAuthOpenPrompt')}${result.userCode}${t('providerAuthOpenPromptSuffix')}`);
+      window.open(result.verificationUri, '_blank', 'noopener,noreferrer');
+      scheduleProviderAuthPoll(result.sessionId, result.intervalMs);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      setAuthSessionId(null);
+      clearAuthPollTimer();
+      setAuthStatusMessage(message);
+      toast.error(`${t('providerAuthStartFailed')}: ${message}`);
+    }
+  };
+
+  const handleImportProviderAuthFromCli = async () => {
+    if (!providerName || providerAuth?.kind !== 'device_code') {
+      return;
+    }
+    try {
+      clearAuthPollTimer();
+      setAuthSessionId(null);
+      const result = await importProviderAuthFromCli.mutateAsync({ provider: providerName });
+      const expiresText = result.expiresAt ? ` (expires: ${result.expiresAt})` : '';
+      setAuthStatusMessage(`${t('providerAuthImportStatusPrefix')}${expiresText}`);
+      toast.success(t('providerAuthImportSuccess'));
+      queryClient.invalidateQueries({ queryKey: ['config'] });
+      queryClient.invalidateQueries({ queryKey: ['config-meta'] });
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      setAuthStatusMessage(message);
+      toast.error(`${t('providerAuthImportFailed')}: ${message}`);
+    }
+  };
+
+  if (!providerName || !providerSpec) {
     return (
       <div className={CONFIG_EMPTY_DETAIL_CARD_CLASS}>
         <div>
@@ -380,7 +501,7 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
     );
   }
 
-  const statusLabel = providerConfig.apiKeySet ? t('statusReady') : t('statusSetup');
+  const statusLabel = resolvedProviderConfig.apiKeySet ? t('statusReady') : t('statusSetup');
 
   return (
     <div className={CONFIG_DETAIL_CARD_CLASS}>
@@ -399,7 +520,7 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
                 <Trash2 className="h-4 w-4" />
               </button>
             )}
-            <StatusDot status={providerConfig.apiKeySet ? 'ready' : 'setup'} label={statusLabel} />
+            <StatusDot status={resolvedProviderConfig.apiKeySet ? 'ready' : 'setup'} label={statusLabel} />
           </div>
         </div>
       </div>
@@ -430,7 +551,7 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
             <MaskedInput
               id="apiKey"
               value={apiKey}
-              isSet={providerConfig.apiKeySet}
+              isSet={resolvedProviderConfig.apiKeySet}
               onChange={(e) => setApiKey(e.target.value)}
               placeholder={apiKeyHint?.placeholder ?? t('enterApiKey')}
               className="rounded-xl"
@@ -438,6 +559,49 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
             <p className="text-xs text-gray-500">{t('leaveBlankToKeepUnchanged')}</p>
           </div>
 
+          {providerAuth?.kind === 'device_code' && (
+            <div className="space-y-2 rounded-xl border border-primary/20 bg-primary-50/50 p-3">
+              <Label className="text-sm font-medium text-gray-900">
+                {providerAuth.displayName || t('providerAuthSectionTitle')}
+              </Label>
+              {providerAuthNote ? (
+                <p className="text-xs text-gray-600">{providerAuthNote}</p>
+              ) : null}
+              <div className="flex flex-wrap items-center gap-2">
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={handleStartProviderAuth}
+                  disabled={startProviderAuth.isPending || Boolean(authSessionId)}
+                >
+                  {startProviderAuth.isPending
+                    ? t('providerAuthStarting')
+                    : authSessionId
+                      ? t('providerAuthAuthorizing')
+                      : t('providerAuthAuthorizeInBrowser')}
+                </Button>
+                {providerAuth.supportsCliImport ? (
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    onClick={handleImportProviderAuthFromCli}
+                    disabled={importProviderAuthFromCli.isPending}
+                  >
+                    {importProviderAuthFromCli.isPending ? t('providerAuthImporting') : t('providerAuthImportFromCli')}
+                  </Button>
+                ) : null}
+                {authSessionId ? (
+                  <span className="text-xs text-gray-500">{t('providerAuthSessionLabel')}: {authSessionId.slice(0, 8)}…</span>
+                ) : null}
+              </div>
+              {authStatusMessage ? (
+                <p className="text-xs text-gray-600">{authStatusMessage}</p>
+              ) : null}
+            </div>
+          )}
+
           <div className="space-y-2">
             <Label htmlFor="apiBase" className="text-sm font-medium text-gray-900">
               {apiBaseHint?.label ?? t('apiBase')}
@@ -450,7 +614,7 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
               placeholder={defaultApiBase || apiBaseHint?.placeholder || 'https://api.example.com'}
               className="rounded-xl"
             />
-            <p className="text-xs text-gray-500">{t('providerApiBaseHelpShort')}</p>
+            <p className="text-xs text-gray-500">{apiBaseHelpText}</p>
           </div>
 
           <div className="space-y-2">