@nextclaw/ui 0.6.6 → 0.6.8

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">

package/src/components/config/ProvidersList.tsx

@@ -5,7 +5,6 @@ import { ProviderForm } from './ProviderForm';
 import { cn } from '@/lib/utils';
 import { Tabs } from '@/components/ui/tabs-custom';
 import { LogoBadge } from '@/components/common/LogoBadge';
-import { getProviderLogo } from '@/lib/logos';
 import { hintForPath } from '@/lib/config-hints';
 import { StatusDot } from '@/components/ui/status-dot';
 import { t } from '@/lib/i18n';
@@ -156,7 +155,7 @@ export function ProvidersList() {
                     <div className="flex min-w-0 items-center gap-3">
                       <LogoBadge
                         name={provider.name}
-                        src={getProviderLogo(provider.name)}
+                        src={provider.logo ? `/logos/${provider.logo}` : null}
                         className={cn(
                           'h-10 w-10 rounded-lg border',
                           isReady ? 'border-primary/30 bg-white' : 'border-gray-200/70 bg-white'

package/src/components/config/SessionsConfig.tsx

@@ -1,13 +1,19 @@
 import { useEffect, useMemo, useState } from 'react';
 import type { SessionEntryView, SessionMessageView } from '@/api/types';
 import { useConfirmDialog } from '@/hooks/useConfirmDialog';
-import { useDeleteSession, useSessionHistory, useSessions, useUpdateSession } from '@/hooks/useConfig';
+import { useChatRuns, useDeleteSession, useSessionHistory, useSessions, useUpdateSession } from '@/hooks/useConfig';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { SessionRunBadge } from '@/components/common/SessionRunBadge';
 import { cn } from '@/lib/utils';
 import { formatDateShort, formatDateTime, t } from '@/lib/i18n';
 import { extractMessageText } from '@/lib/chat-message';
+import {
+  buildActiveRunBySessionKey,
+  buildSessionRunStatusByKey,
+  type SessionRunStatus
+} from '@/lib/session-run-status';
 import { PageLayout, PageHeader } from '@/components/layout/page-layout';
 import { RefreshCw, Search, Clock, Inbox, Hash, Bot, User, MessageCircle, Settings as SettingsIcon } from 'lucide-react';
 
@@ -40,11 +46,12 @@ function displayChannelName(channel: string): string {
 type SessionListItemProps = {
   session: SessionEntryView;
   channel: string;
+  runStatus?: SessionRunStatus;
   isSelected: boolean;
   onSelect: () => void;
 };
 
-function SessionListItem({ session, channel, isSelected, onSelect }: SessionListItemProps) {
+function SessionListItem({ session, channel, runStatus, isSelected, onSelect }: SessionListItemProps) {
   const channelDisplay = displayChannelName(channel);
   const displayName = session.label || session.key.split(':').pop() || session.key;
 
@@ -69,6 +76,9 @@ function SessionListItem({ session, channel, isSelected, onSelect }: SessionList
 
       <div className={cn("flex items-center text-xs justify-between mt-2 font-medium", isSelected ? "text-brand-600/80" : "text-gray-400")}>
         <div className="flex items-center gap-1.5">
+          <span className="inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center">
+            {runStatus ? <SessionRunBadge status={runStatus} /> : null}
+          </span>
           <Clock className="w-3.5 h-3.5 opacity-70" />
           <span className="truncate max-w-[100px]">{formatDateShort(session.updatedAt)}</span>
         </div>
@@ -136,6 +146,7 @@ export function SessionsConfig() {
 
   const sessionsParams = useMemo(() => ({ q: query.trim() || undefined, limit, activeMinutes }), [query, limit, activeMinutes]);
   const sessionsQuery = useSessions(sessionsParams);
+  const activeRunsQuery = useChatRuns({ states: ['queued', 'running'], limit: 200 });
   const historyQuery = useSessionHistory(selectedKey, 200);
 
   const updateSession = useUpdateSession();
@@ -143,6 +154,14 @@ export function SessionsConfig() {
   const { confirm, ConfirmDialog } = useConfirmDialog();
 
   const sessions = useMemo(() => sessionsQuery.data?.sessions ?? [], [sessionsQuery.data?.sessions]);
+  const activeRunBySessionKey = useMemo(
+    () => buildActiveRunBySessionKey(activeRunsQuery.data?.runs ?? []),
+    [activeRunsQuery.data?.runs]
+  );
+  const sessionRunStatusByKey = useMemo(
+    () => buildSessionRunStatusByKey(activeRunBySessionKey),
+    [activeRunBySessionKey]
+  );
   const selectedSession = useMemo(() => sessions.find(s => s.key === selectedKey), [sessions, selectedKey]);
 
   const channels = useMemo(() => {
@@ -273,6 +292,7 @@ export function SessionsConfig() {
                   key={session.key}
                   session={session}
                   channel={resolveChannelFromSessionKey(session.key)}
+                  runStatus={sessionRunStatusByKey.get(session.key)}
                   isSelected={selectedKey === session.key}
                   onSelect={() => setSelectedKey(session.key)}
                 />

package/src/components/layout/Sidebar.tsx

@@ -4,6 +4,7 @@ import { THEME_OPTIONS, type UiTheme } from '@/lib/theme';
 import { Cpu, GitBranch, History, MessageCircle, MessageSquare, Sparkles, BookOpen, Plug, BrainCircuit, AlarmClock, Languages, Palette, KeyRound, Settings, ArrowLeft } from 'lucide-react';
 import { NavLink } from 'react-router-dom';
 import { useDocBrowser } from '@/components/doc-browser';
+import { BrandHeader } from '@/components/common/BrandHeader';
 import { useI18n } from '@/components/providers/I18nProvider';
 import { useTheme } from '@/components/providers/ThemeProvider';
 import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select';
@@ -114,12 +115,7 @@ export function Sidebar({ mode }: SidebarProps) {
         </div>
       ) : (
         <div className="px-2 mb-8">
-          <div className="flex items-center gap-2.5 cursor-pointer">
-            <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 className="flex items-center gap-2.5 cursor-pointer" />
         </div>
       )}
 

package/src/hooks/useConfig.ts

@@ -1,5 +1,6 @@
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import {
+  fetchAppMeta,
   fetchConfig,
   fetchConfigMeta,
   fetchConfigSchema,
@@ -8,6 +9,9 @@ import {
   deleteProvider,
   updateProvider,
   testProviderConnection,
+  startProviderAuth,
+  pollProviderAuth,
+  importProviderAuthFromCli,
   updateChannel,
   updateRuntime,
   updateSecrets,
@@ -37,6 +41,14 @@ export function useConfig() {
   });
 }
 
+export function useAppMeta() {
+  return useQuery({
+    queryKey: ['app-meta'],
+    queryFn: fetchAppMeta,
+    staleTime: Infinity
+  });
+}
+
 export function useConfigMeta() {
   return useQuery({
     queryKey: ['config-meta'],
@@ -125,6 +137,25 @@ export function useTestProviderConnection() {
   });
 }
 
+export function useStartProviderAuth() {
+  return useMutation({
+    mutationFn: ({ provider }: { provider: string }) => startProviderAuth(provider)
+  });
+}
+
+export function usePollProviderAuth() {
+  return useMutation({
+    mutationFn: ({ provider, data }: { provider: string; data: unknown }) =>
+      pollProviderAuth(provider, data as Parameters<typeof pollProviderAuth>[1])
+  });
+}
+
+export function useImportProviderAuthFromCli() {
+  return useMutation({
+    mutationFn: ({ provider }: { provider: string }) => importProviderAuthFromCli(provider)
+  });
+}
+
 export function useUpdateChannel() {
   const queryClient = useQueryClient();