npm - @nextclaw/ui - Versions diffs - 0.9.5 → 0.9.7 - Mend

@nextclaw/ui 0.9.5 → 0.9.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (56) hide show

package/dist/index.html CHANGED Viewed

@@ -6,9 +6,9 @@
   <link rel="icon" type="image/svg+xml" href="/logo.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>NextClaw - 系统配置</title>
-  <script type="module" crossorigin src="/assets/index-CeRbsQ90.js"></script>
-  <link rel="modulepreload" crossorigin href="/assets/vendor-CwsIoNvJ.js">
-  <link rel="stylesheet" crossorigin href="/assets/index-COrhpAdh.css">
+  <script type="module" crossorigin src="/assets/index-D3eWL7gT.js"></script>
+  <link rel="modulepreload" crossorigin href="/assets/vendor-CmQZsDAE.js">
+  <link rel="stylesheet" crossorigin href="/assets/index-DfEAJJsA.css">
 </head>
 <body>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@nextclaw/ui",
-  "version": "0.9.5",
+  "version": "0.9.7",
   "private": false,
   "type": "module",
   "license": "MIT",
@@ -27,11 +27,11 @@
     "tailwind-merge": "^2.5.4",
     "zod": "^3.23.8",
     "zustand": "^5.0.2",
-    "@nextclaw/ncp": "0.3.1",
     "@nextclaw/agent-chat": "0.1.1",
-    "@nextclaw/ncp-http-agent-client": "0.3.1",
+    "@nextclaw/ncp": "0.3.1",
     "@nextclaw/ncp-react": "0.3.2",
-    "@nextclaw/agent-chat-ui": "0.2.1"
+    "@nextclaw/agent-chat-ui": "0.2.1",
+    "@nextclaw/ncp-http-agent-client": "0.3.1"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.0",

package/src/App.tsx CHANGED Viewed

@@ -1,21 +1,15 @@
 import { lazy, Suspense } from 'react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { AccountPanel } from '@/account/components/account-panel';
+import { appQueryClient } from '@/app-query-client';
 import { LoginPage } from '@/components/auth/login-page';
 import { AppLayout } from '@/components/layout/AppLayout';
 import { useAuthStatus } from '@/hooks/use-auth';
 import { useWebSocket } from '@/hooks/useWebSocket';
+import { AppPresenterProvider } from '@/presenter/app-presenter-context';
 import { Toaster } from 'sonner';
 import { Routes, Route, Navigate } from 'react-router-dom';
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      retry: 1,
-      refetchOnWindowFocus: true
-    }
-  }
-});
 const ModelConfigPage = lazy(async () => ({ default: (await import('@/components/config/ModelConfig')).ModelConfig }));
 const ChatPage = lazy(async () => ({ default: (await import('@/components/chat/ChatPage')).ChatPage }));
 const SearchConfigPage = lazy(async () => ({ default: (await import('@/components/config/SearchConfig')).SearchConfig }));
@@ -38,36 +32,39 @@ function LazyRoute({ children }: { children: JSX.Element }) {
 }
 function ProtectedApp() {
-  useWebSocket(queryClient); // Initialize WebSocket connection
+  useWebSocket(appQueryClient); // Initialize WebSocket connection
   return (
-    <AppLayout>
-      <div className="w-full h-full">
-        <Routes>
-          <Route path="/chat/skills" element={<Navigate to="/skills" replace />} />
-          <Route path="/chat/cron" element={<Navigate to="/cron" replace />} />
-          <Route path="/chat/:sessionId?" element={<LazyRoute><ChatPage view="chat" /></LazyRoute>} />
-          <Route path="/skills" element={<LazyRoute><ChatPage view="skills" /></LazyRoute>} />
-          <Route path="/cron" element={<LazyRoute><ChatPage view="cron" /></LazyRoute>} />
-          <Route path="/model" element={<LazyRoute><ModelConfigPage /></LazyRoute>} />
-          <Route path="/search" element={<LazyRoute><SearchConfigPage /></LazyRoute>} />
-          <Route path="/providers" element={<LazyRoute><ProvidersListPage /></LazyRoute>} />
-          <Route path="/channels" element={<LazyRoute><ChannelsListPage /></LazyRoute>} />
-          <Route path="/runtime" element={<LazyRoute><RuntimeConfigPage /></LazyRoute>} />
-          <Route path="/remote" element={<LazyRoute><RemoteAccessPage /></LazyRoute>} />
-          <Route path="/security" element={<LazyRoute><SecurityConfigPage /></LazyRoute>} />
-          <Route path="/sessions" element={<LazyRoute><SessionsConfigPage /></LazyRoute>} />
-          <Route path="/secrets" element={<LazyRoute><SecretsConfigPage /></LazyRoute>} />
-          <Route path="/settings" element={<Navigate to="/model" replace />} />
-          <Route path="/marketplace/skills" element={<Navigate to="/skills" replace />} />
-          <Route path="/marketplace" element={<Navigate to="/marketplace/plugins" replace />} />
-          <Route path="/marketplace/mcp" element={<LazyRoute><McpMarketplacePage /></LazyRoute>} />
-          <Route path="/marketplace/:type" element={<LazyRoute><MarketplacePage /></LazyRoute>} />
-          <Route path="/" element={<Navigate to="/chat" replace />} />
-          <Route path="*" element={<Navigate to="/chat" replace />} />
-        </Routes>
-      </div>
-    </AppLayout>
+    <AppPresenterProvider>
+      <AppLayout>
+        <div className="w-full h-full">
+          <Routes>
+            <Route path="/chat/skills" element={<Navigate to="/skills" replace />} />
+            <Route path="/chat/cron" element={<Navigate to="/cron" replace />} />
+            <Route path="/chat/:sessionId?" element={<LazyRoute><ChatPage view="chat" /></LazyRoute>} />
+            <Route path="/skills" element={<LazyRoute><ChatPage view="skills" /></LazyRoute>} />
+            <Route path="/cron" element={<LazyRoute><ChatPage view="cron" /></LazyRoute>} />
+            <Route path="/model" element={<LazyRoute><ModelConfigPage /></LazyRoute>} />
+            <Route path="/search" element={<LazyRoute><SearchConfigPage /></LazyRoute>} />
+            <Route path="/providers" element={<LazyRoute><ProvidersListPage /></LazyRoute>} />
+            <Route path="/channels" element={<LazyRoute><ChannelsListPage /></LazyRoute>} />
+            <Route path="/runtime" element={<LazyRoute><RuntimeConfigPage /></LazyRoute>} />
+            <Route path="/remote" element={<LazyRoute><RemoteAccessPage /></LazyRoute>} />
+            <Route path="/security" element={<LazyRoute><SecurityConfigPage /></LazyRoute>} />
+            <Route path="/sessions" element={<LazyRoute><SessionsConfigPage /></LazyRoute>} />
+            <Route path="/secrets" element={<LazyRoute><SecretsConfigPage /></LazyRoute>} />
+            <Route path="/settings" element={<Navigate to="/model" replace />} />
+            <Route path="/marketplace/skills" element={<Navigate to="/skills" replace />} />
+            <Route path="/marketplace" element={<Navigate to="/marketplace/plugins" replace />} />
+            <Route path="/marketplace/mcp" element={<LazyRoute><McpMarketplacePage /></LazyRoute>} />
+            <Route path="/marketplace/:type" element={<LazyRoute><MarketplacePage /></LazyRoute>} />
+            <Route path="/" element={<Navigate to="/chat" replace />} />
+            <Route path="*" element={<Navigate to="/chat" replace />} />
+          </Routes>
+        </div>
+      </AppLayout>
+      <AccountPanel />
+    </AppPresenterProvider>
   );
 }
@@ -87,7 +84,7 @@ function AuthGate() {
 export default function AppContent() {
   return (
-    <QueryClientProvider client={queryClient}>
+    <QueryClientProvider client={appQueryClient}>
       <AuthGate />
       <Toaster position="top-right" richColors />
     </QueryClientProvider>

package/src/account/components/account-panel.tsx ADDED Viewed

@@ -0,0 +1,93 @@
+import { Button } from '@/components/ui/button';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { useRemoteStatus } from '@/hooks/useRemoteAccess';
+import { formatDateTime, t } from '@/lib/i18n';
+import { useAccountStore } from '@/account/stores/account.store';
+import { useAppPresenter } from '@/presenter/app-presenter-context';
+import { KeyRound, LogOut, SquareArrowOutUpRight } from 'lucide-react';
+import { useEffect } from 'react';
+function AccountValueRow(props: { label: string; value?: string | null }) {
+  return (
+    <div className="flex items-start justify-between gap-4 py-2 text-sm">
+      <span className="text-gray-500">{props.label}</span>
+      <span className="text-right text-gray-900">{props.value?.trim() || '-'}</span>
+    </div>
+  );
+}
+export function AccountPanel() {
+  const presenter = useAppPresenter();
+  const remoteStatus = useRemoteStatus();
+  const panelOpen = useAccountStore((state) => state.panelOpen);
+  const authSessionId = useAccountStore((state) => state.authSessionId);
+  const authVerificationUri = useAccountStore((state) => state.authVerificationUri);
+  const authExpiresAt = useAccountStore((state) => state.authExpiresAt);
+  const authStatusMessage = useAccountStore((state) => state.authStatusMessage);
+  const status = remoteStatus.data;
+  useEffect(() => {
+    presenter.accountManager.syncRemoteStatus(status);
+  }, [presenter, status]);
+  return (
+    <Dialog open={panelOpen} onOpenChange={(open) => (open ? presenter.accountManager.openAccountPanel() : presenter.accountManager.closeAccountPanel())}>
+      <DialogContent className="max-w-xl">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <KeyRound className="h-5 w-5 text-primary" />
+            {t('accountPanelTitle')}
+          </DialogTitle>
+          <DialogDescription>{t('accountPanelDescription')}</DialogDescription>
+        </DialogHeader>
+        {status?.account.loggedIn ? (
+          <div className="space-y-4">
+            <div className="rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-3">
+              <p className="text-sm font-medium text-emerald-800">{t('accountPanelSignedInTitle')}</p>
+              <p className="mt-1 text-sm text-emerald-700">{t('accountPanelSignedInDescription')}</p>
+            </div>
+            <div className="rounded-2xl border border-gray-200 bg-gray-50 px-4 py-3">
+              <AccountValueRow label={t('remoteAccountEmail')} value={status.account.email} />
+              <AccountValueRow label={t('remoteAccountRole')} value={status.account.role} />
+            </div>
+            <div className="flex flex-wrap gap-3">
+              <Button onClick={() => void presenter.accountManager.openNextClawWeb()}>
+                <SquareArrowOutUpRight className="mr-2 h-4 w-4" />
+                {t('remoteOpenDeviceList')}
+              </Button>
+              <Button variant="outline" onClick={() => void presenter.accountManager.logout()}>
+                <LogOut className="mr-2 h-4 w-4" />
+                {t('remoteLogout')}
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <div className="space-y-4">
+            <div className="rounded-2xl border border-gray-200 bg-gray-50 px-4 py-3">
+              <p className="text-sm font-medium text-gray-900">{t('accountPanelSignedOutTitle')}</p>
+              <p className="mt-1 text-sm text-gray-600">{t('accountPanelSignedOutDescription')}</p>
+              {authSessionId ? (
+                <div className="mt-3 border-t border-white/80 pt-3">
+                  <AccountValueRow label={t('remoteBrowserAuthSession')} value={authSessionId} />
+                  <AccountValueRow label={t('remoteBrowserAuthExpiresAt')} value={authExpiresAt ? formatDateTime(authExpiresAt) : '-'} />
+                </div>
+              ) : null}
+            </div>
+            {authStatusMessage ? <p className="text-sm text-gray-600">{authStatusMessage}</p> : null}
+            <div className="flex flex-wrap gap-3">
+              <Button onClick={() => void presenter.accountManager.startBrowserSignIn()}>
+                {authSessionId ? t('remoteBrowserAuthActionRetry') : t('remoteBrowserAuthAction')}
+              </Button>
+              {authVerificationUri ? (
+                <Button variant="outline" onClick={() => presenter.accountManager.resumeBrowserSignIn()}>
+                  {t('remoteBrowserAuthResume')}
+                </Button>
+              ) : null}
+            </div>
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/account/managers/account.manager.ts ADDED Viewed

@@ -0,0 +1,179 @@
+import { logoutRemote, pollRemoteBrowserAuth, startRemoteBrowserAuth } from '@/api/remote';
+import type { RemoteAccessView } from '@/api/remote.types';
+import type { AccountPendingAction } from '@/account/stores/account.store';
+import { useAccountStore } from '@/account/stores/account.store';
+import {
+  ensureRemoteStatus,
+  refreshRemoteStatus,
+  resolveRemotePlatformApiBase,
+  resolveRemoteWebBase
+} from '@/remote/remote-access.query';
+import { formatDateTime, t } from '@/lib/i18n';
+import { toast } from 'sonner';
+type SignedInContinuation = (action: AccountPendingAction, status: RemoteAccessView) => Promise<void>;
+export class AccountManager {
+  private authPollTimerId: number | null = null;
+  private afterSignedIn: SignedInContinuation | null = null;
+  bindSignedInContinuation = (handler: SignedInContinuation) => {
+    this.afterSignedIn = handler;
+  };
+  openAccountPanel = () => {
+    useAccountStore.getState().openPanel();
+  };
+  closeAccountPanel = () => {
+    useAccountStore.getState().closePanel();
+  };
+  syncRemoteStatus = (status: RemoteAccessView | undefined) => {
+    if (!status?.account.loggedIn) {
+      return;
+    }
+    this.clearPollTimer();
+    useAccountStore.getState().clearBrowserAuth();
+  };
+  ensureSignedIn = async (params?: { pendingAction?: AccountPendingAction; apiBase?: string }) => {
+    const status = await ensureRemoteStatus();
+    if (status.account.loggedIn) {
+      return true;
+    }
+    if (params?.pendingAction) {
+      useAccountStore.getState().setPendingAction(params.pendingAction);
+    }
+    this.openAccountPanel();
+    await this.startBrowserSignIn({ apiBase: params?.apiBase, status });
+    return false;
+  };
+  startBrowserSignIn = async (params?: { apiBase?: string; status?: RemoteAccessView }) => {
+    try {
+      const status = params?.status ?? (await ensureRemoteStatus());
+      const result = await startRemoteBrowserAuth({
+        apiBase: resolveRemotePlatformApiBase(status, params?.apiBase)
+      });
+      useAccountStore.getState().beginBrowserAuth({
+        sessionId: result.sessionId,
+        verificationUri: result.verificationUri,
+        expiresAt: result.expiresAt,
+        intervalMs: result.intervalMs,
+        statusMessage: t('remoteBrowserAuthWaiting')
+      });
+      const opened = window.open(result.verificationUri, '_blank', 'noopener,noreferrer');
+      if (!opened) {
+        useAccountStore.getState().setAuthStatusMessage(t('remoteBrowserAuthPopupBlocked'));
+      }
+      this.scheduleBrowserAuthPoll();
+    } catch (error) {
+      const message = error instanceof Error ? error.message : t('remoteBrowserAuthStartFailed');
+      toast.error(`${t('remoteBrowserAuthStartFailed')}: ${message}`);
+    }
+  };
+  resumeBrowserSignIn = () => {
+    const verificationUri = useAccountStore.getState().authVerificationUri;
+    if (!verificationUri) {
+      return;
+    }
+    window.open(verificationUri, '_blank', 'noopener,noreferrer');
+  };
+  logout = async () => {
+    try {
+      await logoutRemote();
+      useAccountStore.getState().clearPendingAction();
+      useAccountStore.getState().clearBrowserAuth();
+      await refreshRemoteStatus();
+      toast.success(t('remoteLogoutSuccess'));
+    } catch (error) {
+      const message = error instanceof Error ? error.message : t('remoteLogoutFailed');
+      toast.error(`${t('remoteLogoutFailed')}: ${message}`);
+    }
+  };
+  openNextClawWeb = async () => {
+    const status = await ensureRemoteStatus();
+    const webBase = resolveRemoteWebBase(status);
+    if (!webBase) {
+      toast.error(t('remoteOpenWebUnavailable'));
+      return;
+    }
+    window.open(webBase, '_blank', 'noopener,noreferrer');
+  };
+  private scheduleBrowserAuthPoll = () => {
+    this.clearPollTimer();
+    const { authSessionId, authPollIntervalMs } = useAccountStore.getState();
+    if (!authSessionId) {
+      return;
+    }
+    this.authPollTimerId = window.setTimeout(async () => {
+      await this.pollBrowserSignIn();
+    }, authPollIntervalMs);
+  };
+  private pollBrowserSignIn = async () => {
+    const store = useAccountStore.getState();
+    if (!store.authSessionId) {
+      return;
+    }
+    try {
+      const status = await ensureRemoteStatus();
+      const result = await pollRemoteBrowserAuth({
+        sessionId: store.authSessionId,
+        apiBase: resolveRemotePlatformApiBase(status)
+      });
+      if (result.status === 'pending') {
+        useAccountStore.getState().updateBrowserAuth({
+          statusMessage: t('remoteBrowserAuthWaiting'),
+          intervalMs: result.nextPollMs ?? 1500
+        });
+        this.scheduleBrowserAuthPoll();
+        return;
+      }
+      if (result.status === 'expired') {
+        this.clearPollTimer();
+        useAccountStore.getState().clearBrowserAuth();
+        toast.error(result.message || t('remoteBrowserAuthExpired'));
+        return;
+      }
+      useAccountStore.getState().setAuthStatusMessage(t('remoteBrowserAuthCompleted'));
+      const nextStatus = await refreshRemoteStatus();
+      const { pendingAction } = useAccountStore.getState();
+      this.clearPollTimer();
+      useAccountStore.getState().clearBrowserAuth();
+      toast.success(t('remoteLoginSuccess'));
+      if (pendingAction && this.afterSignedIn) {
+        await this.afterSignedIn(pendingAction, nextStatus);
+      }
+      useAccountStore.getState().clearPendingAction();
+    } catch (error) {
+      this.clearPollTimer();
+      useAccountStore.getState().clearBrowserAuth();
+      const message = error instanceof Error ? error.message : t('remoteBrowserAuthPollFailed');
+      toast.error(`${t('remoteBrowserAuthPollFailed')}: ${message}`);
+    }
+  };
+  private clearPollTimer = () => {
+    if (this.authPollTimerId !== null) {
+      window.clearTimeout(this.authPollTimerId);
+      this.authPollTimerId = null;
+    }
+  };
+  getBrowserAuthSummary = () => {
+    const store = useAccountStore.getState();
+    return {
+      sessionId: store.authSessionId,
+      expiresAt: store.authExpiresAt ? formatDateTime(store.authExpiresAt) : '-'
+    };
+  };
+}

package/src/account/stores/account.store.ts ADDED Viewed

@@ -0,0 +1,68 @@
+import { create } from 'zustand';
+export type AccountPendingAction =
+  | {
+      type: 'enable-remote';
+    }
+  | null;
+type AccountStoreState = {
+  panelOpen: boolean;
+  authSessionId: string | null;
+  authVerificationUri: string | null;
+  authExpiresAt: string | null;
+  authStatusMessage: string;
+  authPollIntervalMs: number;
+  pendingAction: AccountPendingAction;
+  openPanel: () => void;
+  closePanel: () => void;
+  setPendingAction: (next: AccountPendingAction) => void;
+  clearPendingAction: () => void;
+  beginBrowserAuth: (payload: {
+    sessionId: string;
+    verificationUri: string;
+    expiresAt: string;
+    intervalMs: number;
+    statusMessage: string;
+  }) => void;
+  updateBrowserAuth: (patch: { statusMessage?: string; intervalMs?: number }) => void;
+  clearBrowserAuth: () => void;
+  setAuthStatusMessage: (message: string) => void;
+};
+export const useAccountStore = create<AccountStoreState>((set) => ({
+  panelOpen: false,
+  authSessionId: null,
+  authVerificationUri: null,
+  authExpiresAt: null,
+  authStatusMessage: '',
+  authPollIntervalMs: 1500,
+  pendingAction: null,
+  openPanel: () => set({ panelOpen: true }),
+  closePanel: () => set({ panelOpen: false }),
+  setPendingAction: (next) => set({ pendingAction: next }),
+  clearPendingAction: () => set({ pendingAction: null }),
+  beginBrowserAuth: ({ sessionId, verificationUri, expiresAt, intervalMs, statusMessage }) =>
+    set({
+      panelOpen: true,
+      authSessionId: sessionId,
+      authVerificationUri: verificationUri,
+      authExpiresAt: expiresAt,
+      authPollIntervalMs: intervalMs,
+      authStatusMessage: statusMessage
+    }),
+  updateBrowserAuth: ({ statusMessage, intervalMs }) =>
+    set((state) => ({
+      authStatusMessage: statusMessage ?? state.authStatusMessage,
+      authPollIntervalMs: intervalMs ?? state.authPollIntervalMs
+    })),
+  clearBrowserAuth: () =>
+    set({
+      authSessionId: null,
+      authVerificationUri: null,
+      authExpiresAt: null,
+      authStatusMessage: '',
+      authPollIntervalMs: 1500
+    }),
+  setAuthStatusMessage: (message) => set({ authStatusMessage: message })
+}));

package/src/app-query-client.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import { QueryClient } from '@tanstack/react-query';
+export const appQueryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: 1,
+      refetchOnWindowFocus: true
+    }
+  }
+});

package/src/components/layout/Sidebar.tsx CHANGED Viewed

@@ -8,6 +8,8 @@ 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';
+import { useRemoteStatus } from '@/hooks/useRemoteAccess';
+import { useAppPresenter } from '@/presenter/app-presenter-context';
 type SidebarMode = 'main' | 'settings';
@@ -16,11 +18,15 @@ type SidebarProps = {
 };
 export function Sidebar({ mode }: SidebarProps) {
+  const presenter = useAppPresenter();
   const docBrowser = useDocBrowser();
+  const remoteStatus = useRemoteStatus();
   const { language, setLanguage } = useI18n();
   const { theme, setTheme } = useTheme();
   const currentLanguageLabel = LANGUAGE_OPTIONS.find((option) => option.value === language)?.label ?? language;
   const currentThemeLabel = t(THEME_OPTIONS.find((option) => option.value === theme)?.labelKey ?? 'themeWarm');
+  const accountEmail = remoteStatus.data?.account.email?.trim();
+  const accountConnected = Boolean(remoteStatus.data?.account.loggedIn);
   const handleLanguageSwitch = (nextLanguage: I18nLanguage) => {
     if (language === nextLanguage) {
@@ -174,6 +180,26 @@ export function Sidebar({ mode }: SidebarProps) {
       {/* Help Button */}
       <div className="pt-3 border-t border-[#dde0ea] mt-3">
+        {mode === 'settings' ? (
+          <button
+            onClick={() => presenter.accountManager.openAccountPanel()}
+            className="mb-2 w-full rounded-xl px-3 py-2.5 text-left transition-all duration-base text-gray-600 hover:bg-[#e4e7ef] hover:text-gray-900"
+          >
+            <div className="flex items-start gap-3">
+              <KeyRound className={cn('mt-0.5 h-[17px] w-[17px]', accountConnected ? 'text-emerald-600' : 'text-gray-400')} />
+              <div className="min-w-0 flex-1">
+                <div className="flex items-center justify-between gap-3">
+                  <p className="truncate text-[14px] font-medium text-gray-900">
+                    {accountEmail || t('remoteAccountEntryManage')}
+                  </p>
+                </div>
+                <p className="mt-1 truncate text-xs text-gray-500">
+                  {accountConnected ? t('remoteAccountEntryConnected') : t('remoteAccountEntryDisconnected')}
+                </p>
+              </div>
+            </div>
+          </button>
+        ) : null}
         {mode === 'main' && (
           <div className="mb-2">
             <NavLink