@nextclaw/ui 0.9.6 → 0.9.7

package/src/hooks/useRemoteAccess.ts

@@ -10,11 +10,12 @@ import {
   updateRemoteSettings
 } from '@/api/remote';
 import { t } from '@/lib/i18n';
+import { REMOTE_STATUS_QUERY_KEY } from '@/remote/remote-access.query';
 import { toast } from 'sonner';
 
 export function useRemoteStatus() {
   return useQuery({
-    queryKey: ['remote-status'],
+    queryKey: REMOTE_STATUS_QUERY_KEY,
     queryFn: fetchRemoteStatus,
     staleTime: 5000,
     refetchOnWindowFocus: true
@@ -27,7 +28,7 @@ export function useRemoteLogin() {
   return useMutation({
     mutationFn: loginRemote,
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['remote-status'] });
+      queryClient.invalidateQueries({ queryKey: REMOTE_STATUS_QUERY_KEY });
       toast.success(t('remoteLoginSuccess'));
     },
     onError: (error: Error) => {
@@ -52,7 +53,7 @@ export function useRemoteBrowserAuthPoll() {
     mutationFn: pollRemoteBrowserAuth,
     onSuccess: (result) => {
       if (result.status === 'authorized') {
-        queryClient.invalidateQueries({ queryKey: ['remote-status'] });
+        queryClient.invalidateQueries({ queryKey: REMOTE_STATUS_QUERY_KEY });
         toast.success(t('remoteLoginSuccess'));
       }
     },
@@ -68,7 +69,7 @@ export function useRemoteLogout() {
   return useMutation({
     mutationFn: logoutRemote,
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['remote-status'] });
+      queryClient.invalidateQueries({ queryKey: REMOTE_STATUS_QUERY_KEY });
       toast.success(t('remoteLogoutSuccess'));
     },
     onError: (error: Error) => {
@@ -83,7 +84,7 @@ export function useRemoteSettings() {
   return useMutation({
     mutationFn: updateRemoteSettings,
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['remote-status'] });
+      queryClient.invalidateQueries({ queryKey: REMOTE_STATUS_QUERY_KEY });
       toast.success(t('remoteSettingsSaved'));
     },
     onError: (error: Error) => {
@@ -110,7 +111,7 @@ export function useRemoteServiceControl() {
   return useMutation({
     mutationFn: controlRemoteService,
     onSuccess: (result) => {
-      queryClient.invalidateQueries({ queryKey: ['remote-status'] });
+      queryClient.invalidateQueries({ queryKey: REMOTE_STATUS_QUERY_KEY });
       toast.success(result.message);
     },
     onError: (error: Error) => {

package/src/lib/i18n.remote.ts

@@ -1,14 +1,110 @@
 export const REMOTE_LABELS: Record<string, { zh: string; en: string }> = {
   remotePageTitle: { zh: '远程访问', en: 'Remote Access' },
   remotePageDescription: {
-    zh: '直接在界面内完成平台登录、设备配置、后台服务控制与诊断。',
-    en: 'Handle platform login, device settings, managed service control, and diagnostics directly in the UI.'
+    zh: '让这台设备出现在 NextClaw Platform 的设备列表里，并从网页中打开它。',
+    en: 'Make this device appear in your NextClaw Platform device list and open it from the web.'
+  },
+  remoteOpenWeb: { zh: '前往 NextClaw Web', en: 'Open NextClaw Web' },
+  remoteOpenDeviceList: { zh: '查看我的设备', en: 'View My Devices' },
+  remoteOpenWebHint: {
+    zh: '开启后，这台设备会出现在 NextClaw Web 中，你可以在那里点击打开并继续使用。',
+    en: 'Once enabled, this device appears in NextClaw Web, where you can open it and keep working.'
+  },
+  remoteOpenWebUnavailable: {
+    zh: '暂时还没有可用的平台地址，请先完成登录。',
+    en: 'No platform URL is available yet. Sign in first.'
   },
   remoteLoading: { zh: '正在加载远程访问状态...', en: 'Loading remote access status...' },
+  remoteStatusNeedsSignIn: { zh: '先登录 NextClaw', en: 'Sign in to NextClaw first' },
+  remoteStatusNeedsSignInDescription: {
+    zh: '远程访问依赖 NextClaw 账号。登录后，这台设备才能和网页版关联起来。',
+    en: 'Remote access depends on your NextClaw account. Sign in first to link this device to the web app.'
+  },
+  remoteStatusNeedsEnable: { zh: '还没有开启远程访问', en: 'Remote access is not enabled yet' },
+  remoteStatusNeedsEnableDescription: {
+    zh: '你已经登录 NextClaw。开启后，这台设备会出现在网页版的设备列表中。',
+    en: 'You are already signed in. Enable remote access and this device will appear in your web device list.'
+  },
+  remoteStatusConnectingTitle: { zh: '正在把这台设备接入 NextClaw Web', en: 'Connecting this device to NextClaw Web' },
+  remoteStatusConnectingDescription: {
+    zh: '后台服务正在建立连接，几秒后刷新即可看到最新状态。',
+    en: 'The managed service is establishing the connection. Refresh in a few seconds to see the latest state.'
+  },
+  remoteStatusReadyTitle: { zh: '这台设备已经可在网页中打开', en: 'This device is ready in the web app' },
+  remoteStatusReadyDescription: {
+    zh: '你现在可以前往 NextClaw Web，在设备列表中点击打开，继续这条 Agent 链路。',
+    en: 'You can now open NextClaw Web, find this device in the list, and continue your agent workflow there.'
+  },
+  remoteStatusNeedsServiceTitle: { zh: '需要拉起后台服务', en: 'The managed service needs to run' },
+  remoteStatusNeedsServiceDescription: {
+    zh: '远程访问已经开启，但后台服务没有运行。拉起后才会真正连到网页版。',
+    en: 'Remote access is enabled, but the managed service is not running yet. Start it to connect to the web app.'
+  },
+  remoteStatusIssueTitle: { zh: '远程连接当前有异常', en: 'The remote connection needs attention' },
+  remoteStatusIssueDescription: {
+    zh: '账号和设备配置都还在，但当前没有稳定连上平台。你可以重新连接，或先去设备列表确认这台设备的状态。',
+    en: 'Your account and device settings are still there, but this device is not stably connected to the platform right now. Reconnect it or check the device list first.'
+  },
+  remoteStatusIssueDetailTitle: { zh: '当前提示', en: 'Current Hint' },
+  remoteStatusIssueDetailGeneric: {
+    zh: '连接曾经建立，但随后被平台侧主动关闭。常见原因包括登录态失效、平台侧中继不可用，或云端配额暂时触顶。',
+    en: 'The connection was established and then closed by the platform. Common causes include an expired session, an unavailable relay, or a temporary cloud quota limit.'
+  },
+  remoteStatusIssueDetailServiceStopped: {
+    zh: '本地托管服务没有在运行，所以远程连接不会保持在线。',
+    en: 'The local managed service is not running, so the remote connection cannot stay online.'
+  },
+  remoteSignInAndEnable: { zh: '登录并开启远程访问', en: 'Sign In and Enable Remote Access' },
+  remoteEnableNow: { zh: '开启远程访问', en: 'Enable Remote Access' },
+  remoteReconnectNow: { zh: '重新连接', en: 'Reconnect' },
+  remoteDisable: { zh: '关闭远程访问', en: 'Disable Remote Access' },
+  remoteDeviceSummaryTitle: { zh: '当前设备', en: 'This Device' },
+  remoteDeviceSummaryDescription: {
+    zh: '普通用户只需要关心账号、设备名、连接状态和网页版入口。',
+    en: 'Users only need the account, device name, connection state, and web entry.'
+  },
+  remoteSignedInAccount: { zh: '当前账号', en: 'Signed-in Account' },
+  remoteConnectionStatus: { zh: '连接状态', en: 'Connection Status' },
+  remoteAdvancedTitle: { zh: '高级设置', en: 'Advanced Settings' },
+  remoteAdvancedDescription: {
+    zh: '只有在排查或自定义平台地址时，才需要打开这一层。',
+    en: 'Only open this section when you need diagnostics or a custom platform API base.'
+  },
+  remoteAdvancedToggleOpen: { zh: '展开高级设置', en: 'Show Advanced Settings' },
+  remoteAdvancedToggleClose: { zh: '收起高级设置', en: 'Hide Advanced Settings' },
+  remoteAdvancedSaved: { zh: '高级设置已保存', en: 'Advanced settings saved' },
+  remoteEnabledReady: { zh: '远程访问已开启，现在可以前往 NextClaw Web 使用', en: 'Remote access is enabled. You can now use NextClaw Web.' },
+  remoteDisabledDone: { zh: '远程访问已关闭', en: 'Remote access is disabled' },
+  remoteServiceRecovered: { zh: '后台服务已重新接上远程访问', en: 'The managed service is connected again' },
+  remoteActionEnabling: { zh: '正在开启远程访问...', en: 'Enabling remote access...' },
+  remoteActionDisabling: { zh: '正在关闭远程访问...', en: 'Disabling remote access...' },
+  remoteActionSavingAdvanced: { zh: '正在保存高级设置...', en: 'Saving advanced settings...' },
+  remoteActionStarting: { zh: '正在启动后台服务...', en: 'Starting the managed service...' },
+  remoteActionRestarting: { zh: '正在重启后台服务...', en: 'Restarting the managed service...' },
+  remoteActionStopping: { zh: '正在停止后台服务...', en: 'Stopping the managed service...' },
+  remoteAccountEntryTitle: { zh: 'NextClaw 账号', en: 'NextClaw Account' },
+  remoteAccountEntryDisconnected: { zh: '未登录，点击连接', en: 'Not signed in. Click to connect.' },
+  remoteAccountEntryConnected: { zh: '已连接到 NextClaw', en: 'Connected to NextClaw' },
+  remoteAccountEntryManage: { zh: '账号与设备入口', en: 'Account and Device Entry' },
+  accountPanelTitle: { zh: 'NextClaw 账号', en: 'NextClaw Account' },
+  accountPanelDescription: {
+    zh: '远程访问依赖这个账号登录。后续 token、授权和更多云端能力也会基于它展开。',
+    en: 'Remote access depends on this account. Tokens, authorization, and future cloud capabilities will build on it.'
+  },
+  accountPanelSignedInTitle: { zh: '账号已连接', en: 'Account Connected' },
+  accountPanelSignedInDescription: {
+    zh: '这台设备已经和你的 NextClaw 账号关联，可以直接去网页版查看设备。',
+    en: 'This device is linked to your NextClaw account. You can go to the web app and open the device there.'
+  },
+  accountPanelSignedOutTitle: { zh: '通过浏览器完成登录', en: 'Continue Sign-In in Your Browser' },
+  accountPanelSignedOutDescription: {
+    zh: '点击下方按钮后会打开 NextClaw 网页，在网页中登录或注册，当前设备会自动接入。',
+    en: 'Click the button below to open NextClaw Web, sign in or create an account there, and this device will attach automatically.'
+  },
   remoteOverviewTitle: { zh: '连接总览', en: 'Connection Overview' },
   remoteOverviewDescription: {
-    zh: '快速确认平台账号、托管服务和远程连接器状态。',
-    en: 'Quickly verify platform account, managed service, and connector state.'
+    zh: '只保留普通用户真正需要知道的信息。',
+    en: 'Keep only the information ordinary users actually need.'
   },
   remoteAccountConnected: { zh: '平台已登录', en: 'Platform Connected' },
   remoteAccountNotConnected: { zh: '平台未登录', en: 'Platform Not Connected' },
@@ -21,6 +117,7 @@ export const REMOTE_LABELS: Record<string, { zh: string; en: string }> = {
   remoteLocalOrigin: { zh: '本地服务地址', en: 'Local Origin' },
   remotePublicPlatform: { zh: '平台地址', en: 'Platform Base' },
   remoteDeviceId: { zh: '设备 ID', en: 'Device ID' },
+  remoteRuntimeUpdatedAt: { zh: '状态更新时间', en: 'Status Updated At' },
   remoteLastConnectedAt: { zh: '上次连接时间', en: 'Last Connected At' },
   remoteLastError: { zh: '最近错误', en: 'Last Error' },
   remoteDeviceTitle: { zh: '设备配置', en: 'Device Settings' },
@@ -28,6 +125,12 @@ export const REMOTE_LABELS: Record<string, { zh: string; en: string }> = {
     zh: '保存远程访问开关、设备名和平台 API Base。',
     en: 'Save remote access state, device name, and platform API base.'
   },
+  remoteDeviceSectionTitle: { zh: '设备信息', en: 'Device Info' },
+  remoteDeviceSectionDescription: {
+    zh: '开启之后，这台设备会在平台网页的设备列表中出现。',
+    en: 'Once enabled, this device will appear in the platform web device list.'
+  },
+  remoteDeviceNameAuto: { zh: '未命名设备', en: 'Unnamed Device' },
   remoteEnabled: { zh: '启用远程访问', en: 'Enable Remote Access' },
   remoteEnabledHelp: {
     zh: '保存后需要启动或重启后台服务，新的远程配置才会真正生效。',
@@ -61,6 +164,7 @@ export const REMOTE_LABELS: Record<string, { zh: string; en: string }> = {
     en: 'Open the platform authorization page in your browser, then sign in or create an account there.'
   },
   remoteBrowserAuthAction: { zh: '前往浏览器授权', en: 'Continue in Browser' },
+  remoteBrowserAuthActionRetry: { zh: '重新发起浏览器登录', en: 'Restart Browser Sign-In' },
   remoteBrowserAuthResume: { zh: '重新打开授权页', en: 'Reopen Authorization Page' },
   remoteBrowserAuthStarting: { zh: '正在创建授权会话...', en: 'Starting authorization...' },
   remoteBrowserAuthAuthorizing: { zh: '等待浏览器完成授权...', en: 'Waiting for browser authorization...' },

package/src/presenter/app-presenter-context.tsx

@@ -0,0 +1,20 @@
+import { createContext, useContext, type ReactNode } from 'react';
+import { appPresenter, type AppPresenter } from '@/presenter/app.presenter';
+
+const AppPresenterContext = createContext<AppPresenter | null>(null);
+
+type AppPresenterProviderProps = {
+  children: ReactNode;
+};
+
+export function AppPresenterProvider({ children }: AppPresenterProviderProps) {
+  return <AppPresenterContext.Provider value={appPresenter}>{children}</AppPresenterContext.Provider>;
+}
+
+export function useAppPresenter() {
+  const presenter = useContext(AppPresenterContext);
+  if (!presenter) {
+    throw new Error('useAppPresenter must be used inside AppPresenterProvider');
+  }
+  return presenter;
+}

package/src/presenter/app.presenter.ts

@@ -0,0 +1,12 @@
+import { AccountManager } from '@/account/managers/account.manager';
+import { RemoteAccessManager } from '@/remote/managers/remote-access.manager';
+
+export class AppPresenter {
+  accountManager = new AccountManager();
+  remoteAccessManager = new RemoteAccessManager();
+}
+
+export const appPresenter = new AppPresenter();
+
+appPresenter.accountManager.bindSignedInContinuation(appPresenter.remoteAccessManager.resumePendingActionAfterSignIn);
+appPresenter.remoteAccessManager.bindAccountManager(appPresenter.accountManager);

package/src/remote/managers/remote-access.manager.ts

@@ -0,0 +1,196 @@
+import { controlRemoteService, fetchRemoteDoctor, updateRemoteSettings } from '@/api/remote';
+import type { RemoteAccessView } from '@/api/remote.types';
+import type { AccountPendingAction } from '@/account/stores/account.store';
+import type { AccountManager } from '@/account/managers/account.manager';
+import { useRemoteAccessStore } from '@/remote/stores/remote-access.store';
+import { refreshRemoteStatus } from '@/remote/remote-access.query';
+import { t } from '@/lib/i18n';
+import { toast } from 'sonner';
+
+export class RemoteAccessManager {
+  private accountManager: AccountManager | null = null;
+
+  bindAccountManager = (accountManager: AccountManager) => {
+    this.accountManager = accountManager;
+  };
+
+  syncStatus = (status: RemoteAccessView | undefined) => {
+    if (!status) {
+      return;
+    }
+    const store = useRemoteAccessStore.getState();
+    if (store.draftTouched || store.actionLabel) {
+      return;
+    }
+    this.hydrateDraftFromStatus(status);
+  };
+
+  setEnabled = (enabled: boolean) => {
+    useRemoteAccessStore.getState().setEnabled(enabled);
+  };
+
+  setDeviceName = (deviceName: string) => {
+    useRemoteAccessStore.getState().setDeviceName(deviceName);
+  };
+
+  setPlatformApiBase = (platformApiBase: string) => {
+    useRemoteAccessStore.getState().setPlatformApiBase(platformApiBase);
+  };
+
+  setAdvancedOpen = (advancedOpen: boolean) => {
+    useRemoteAccessStore.getState().setAdvancedOpen(advancedOpen);
+  };
+
+  enableRemoteAccess = async (status: RemoteAccessView | undefined) => {
+    const currentStatus = status ?? (await refreshRemoteStatus());
+    const draft = useRemoteAccessStore.getState();
+    if (!currentStatus.account.loggedIn) {
+      await this.accountManager?.ensureSignedIn({
+        pendingAction: { type: 'enable-remote' },
+        apiBase: draft.platformApiBase
+      });
+      return;
+    }
+    await this.applyEnabledState(true, currentStatus);
+  };
+
+  disableRemoteAccess = async (status: RemoteAccessView | undefined) => {
+    const currentStatus = status ?? (await refreshRemoteStatus());
+    await this.applyEnabledState(false, currentStatus);
+  };
+
+  repairRemoteAccess = async (status: RemoteAccessView | undefined) => {
+    const currentStatus = status ?? (await refreshRemoteStatus());
+    if (!currentStatus.account.loggedIn) {
+      await this.accountManager?.ensureSignedIn({
+        pendingAction: { type: 'enable-remote' }
+      });
+      return;
+    }
+    const action = currentStatus.service.running ? 'restart' : 'start';
+    await this.runManagedAction({
+      actionLabel: action === 'restart' ? t('remoteActionRestarting') : t('remoteActionStarting'),
+      job: async () => {
+        await controlRemoteService(action);
+        const nextStatus = await refreshRemoteStatus();
+        this.hydrateDraftFromStatus(nextStatus);
+      },
+      successMessage: t('remoteServiceRecovered')
+    });
+  };
+
+  saveAdvancedSettings = async (status: RemoteAccessView | undefined) => {
+    const currentStatus = status ?? (await refreshRemoteStatus());
+    const draft = useRemoteAccessStore.getState();
+    await this.runManagedAction({
+      actionLabel: t('remoteActionSavingAdvanced'),
+      job: async () => {
+        await updateRemoteSettings({
+          enabled: draft.enabled,
+          deviceName: draft.deviceName.trim(),
+          platformApiBase: draft.platformApiBase.trim()
+        });
+        const nextStatus = await refreshRemoteStatus();
+        this.hydrateDraftFromStatus(nextStatus);
+      },
+      successMessage: currentStatus.settings.enabled === draft.enabled ? t('remoteSettingsSaved') : t('remoteAdvancedSaved')
+    });
+  };
+
+  runDoctor = async () => {
+    await this.runManagedAction({
+      actionLabel: t('remoteDoctorRunning'),
+      job: async () => {
+        const doctor = await fetchRemoteDoctor();
+        useRemoteAccessStore.getState().setDoctor(doctor);
+      },
+      successMessage: t('remoteDoctorCompleted')
+    });
+  };
+
+  startService = async () => {
+    await this.runServiceAction('start', t('remoteActionStarting'));
+  };
+
+  restartService = async () => {
+    await this.runServiceAction('restart', t('remoteActionRestarting'));
+  };
+
+  stopService = async () => {
+    await this.runServiceAction('stop', t('remoteActionStopping'));
+  };
+
+  resumePendingActionAfterSignIn = async (action: AccountPendingAction, status: RemoteAccessView) => {
+    if (!action) {
+      return;
+    }
+    if (action.type === 'enable-remote') {
+      await this.applyEnabledState(true, status);
+    }
+  };
+
+  private applyEnabledState = async (enabled: boolean, status: RemoteAccessView) => {
+    const draft = useRemoteAccessStore.getState();
+    await this.runManagedAction({
+      actionLabel: enabled ? t('remoteActionEnabling') : t('remoteActionDisabling'),
+      job: async () => {
+        await updateRemoteSettings({
+          enabled,
+          deviceName: draft.deviceName.trim(),
+          platformApiBase: draft.platformApiBase.trim()
+        });
+        const nextStatus = await refreshRemoteStatus();
+        this.hydrateDraftFromStatus(nextStatus);
+        if (enabled) {
+          const action = nextStatus.service.running ? 'restart' : 'start';
+          await controlRemoteService(action);
+        } else if (status.service.running) {
+          await controlRemoteService('restart');
+        }
+        const finalStatus = await refreshRemoteStatus();
+        this.hydrateDraftFromStatus(finalStatus);
+      },
+      successMessage: enabled ? t('remoteEnabledReady') : t('remoteDisabledDone')
+    });
+  };
+
+  private runServiceAction = async (action: 'start' | 'restart' | 'stop', actionLabel: string) => {
+    await this.runManagedAction({
+      actionLabel,
+      job: async () => {
+        const result = await controlRemoteService(action);
+        const nextStatus = await refreshRemoteStatus();
+        this.hydrateDraftFromStatus(nextStatus);
+        toast.success(result.message);
+      }
+    });
+  };
+
+  private hydrateDraftFromStatus = (status: RemoteAccessView) => {
+    useRemoteAccessStore.getState().hydrateDraft({
+      enabled: status.settings.enabled,
+      deviceName: status.settings.deviceName,
+      platformApiBase: status.settings.platformApiBase
+    });
+  };
+
+  private runManagedAction = async (params: {
+    actionLabel: string;
+    job: () => Promise<void>;
+    successMessage?: string;
+  }) => {
+    useRemoteAccessStore.getState().beginAction(params.actionLabel);
+    try {
+      await params.job();
+      if (params.successMessage) {
+        toast.success(params.successMessage);
+      }
+    } catch (error) {
+      const message = error instanceof Error ? error.message : t('error');
+      toast.error(message);
+      throw error;
+    } finally {
+      useRemoteAccessStore.getState().finishAction();
+    }
+  };
+}

package/src/remote/remote-access.query.ts

@@ -0,0 +1,78 @@
+import { fetchRemoteStatus } from '@/api/remote';
+import type { RemoteAccessView } from '@/api/remote.types';
+import { appQueryClient } from '@/app-query-client';
+
+export const REMOTE_STATUS_QUERY_KEY = ['remote-status'] as const;
+const DEFAULT_NEXTCLAW_WEB_BASE = 'https://platform.nextclaw.io';
+const PREVIEW_NEXTCLAW_WEB_BASE = 'https://nextclaw-platform-console.pages.dev';
+
+export const getRemoteStatusSnapshot = () => {
+  return appQueryClient.getQueryData<RemoteAccessView>(REMOTE_STATUS_QUERY_KEY);
+};
+
+export const ensureRemoteStatus = async () => {
+  return await appQueryClient.fetchQuery({
+    queryKey: REMOTE_STATUS_QUERY_KEY,
+    queryFn: fetchRemoteStatus,
+    staleTime: 5000
+  });
+};
+
+export const refreshRemoteStatus = async () => {
+  await appQueryClient.invalidateQueries({ queryKey: REMOTE_STATUS_QUERY_KEY });
+  return await ensureRemoteStatus();
+};
+
+export const resolveRemotePlatformApiBase = (status: RemoteAccessView | undefined, override?: string) => {
+  const trimmedOverride = override?.trim();
+  if (trimmedOverride) {
+    return trimmedOverride;
+  }
+  const trimmedSettingsBase = status?.settings.platformApiBase?.trim();
+  if (trimmedSettingsBase) {
+    return trimmedSettingsBase;
+  }
+  return status?.account.apiBase?.trim() || undefined;
+};
+
+export const resolveRemotePlatformBase = (status: RemoteAccessView | undefined) => {
+  return status?.platformBase?.trim() || status?.account.platformBase?.trim() || undefined;
+};
+
+function resolveWebBaseFromRawUrl(rawUrl: string | null | undefined): string | undefined {
+  const trimmed = rawUrl?.trim();
+  if (!trimmed) {
+    return undefined;
+  }
+
+  let parsedUrl: URL;
+  try {
+    parsedUrl = new URL(trimmed);
+  } catch {
+    return undefined;
+  }
+
+  if (parsedUrl.hostname === 'platform.nextclaw.io' || parsedUrl.hostname === 'nextclaw-platform-console.pages.dev') {
+    return parsedUrl.origin;
+  }
+
+  if (parsedUrl.hostname === 'ai-gateway-api.nextclaw.io') {
+    return DEFAULT_NEXTCLAW_WEB_BASE;
+  }
+
+  if (parsedUrl.hostname.includes('nextclaw-provider-gateway-api') && parsedUrl.hostname.endsWith('.workers.dev')) {
+    return PREVIEW_NEXTCLAW_WEB_BASE;
+  }
+
+  return undefined;
+}
+
+export const resolveRemoteWebBase = (status: RemoteAccessView | undefined) => {
+  return (
+    resolveWebBaseFromRawUrl(status?.account.apiBase) ||
+    resolveWebBaseFromRawUrl(status?.settings.platformApiBase) ||
+    resolveWebBaseFromRawUrl(status?.platformBase) ||
+    resolveWebBaseFromRawUrl(status?.account.platformBase) ||
+    undefined
+  );
+};

package/src/remote/stores/remote-access.store.ts

@@ -0,0 +1,44 @@
+import type { RemoteDoctorView } from '@/api/remote.types';
+import { create } from 'zustand';
+
+type RemoteAccessStoreState = {
+  enabled: boolean;
+  deviceName: string;
+  platformApiBase: string;
+  draftTouched: boolean;
+  advancedOpen: boolean;
+  actionLabel: string | null;
+  doctor: RemoteDoctorView | null;
+  setEnabled: (enabled: boolean) => void;
+  setDeviceName: (deviceName: string) => void;
+  setPlatformApiBase: (platformApiBase: string) => void;
+  setAdvancedOpen: (advancedOpen: boolean) => void;
+  hydrateDraft: (payload: { enabled: boolean; deviceName: string; platformApiBase: string }) => void;
+  beginAction: (actionLabel: string) => void;
+  finishAction: () => void;
+  setDoctor: (doctor: RemoteDoctorView | null) => void;
+};
+
+export const useRemoteAccessStore = create<RemoteAccessStoreState>((set) => ({
+  enabled: false,
+  deviceName: '',
+  platformApiBase: '',
+  advancedOpen: false,
+  draftTouched: false,
+  actionLabel: null,
+  doctor: null,
+  setEnabled: (enabled) => set({ enabled, draftTouched: true }),
+  setDeviceName: (deviceName) => set({ deviceName, draftTouched: true }),
+  setPlatformApiBase: (platformApiBase) => set({ platformApiBase, draftTouched: true }),
+  setAdvancedOpen: (advancedOpen) => set({ advancedOpen }),
+  hydrateDraft: ({ enabled, deviceName, platformApiBase }) =>
+    set({
+      enabled,
+      deviceName,
+      platformApiBase,
+      draftTouched: false
+    }),
+  beginAction: (actionLabel) => set({ actionLabel }),
+  finishAction: () => set({ actionLabel: null }),
+  setDoctor: (doctor) => set({ doctor })
+}));

package/dist/assets/ChannelsList-Byfj2R01.js

@@ -1 +0,0 @@
-import{r as v,j as a,ax as Z,J as ee,e as F,K as ae,af as te,aS as se,aT as ne,aU as le,D as re,s as oe,a7 as ce,v as ie}from"./vendor-CwsIoNvJ.js";import{t as e,c as I,_ as me,u as q,a as $,b as H,a0 as pe,a1 as de,I as D,S as be,e as ue,f as xe,g as ye,h as ge,B as E}from"./index-CeRbsQ90.js";import{L as he}from"./label-CCSffS1D.js";import{S as fe}from"./switch-B-_SrMSL.js";import{S as J}from"./status-dot-Fz9-eKsl.js";import{L as K}from"./LogoBadge-D7j1al-w.js";import{h as _}from"./config-hints-CApS3K_7.js";import{c as we,b as ve,a as je,C as ke}from"./config-layout-BHnOoweL.js";import{T as Se}from"./tabs-custom-6Tm1ZHfS.js";import{P as Ce,a as Ne}from"./page-layout-ud8wZ8gX.js";function Pe({value:t,onChange:m,className:i,placeholder:r=""}){const[o,u]=v.useState(""),d=x=>{x.key==="Enter"&&o.trim()?(x.preventDefault(),m([...t,o.trim()]),u("")):x.key==="Backspace"&&!o&&t.length>0&&m(t.slice(0,-1))},g=x=>{m(t.filter((j,h)=>h!==x))};return a.jsxs("div",{className:I("flex flex-wrap gap-2 p-2 border rounded-md min-h-[42px]",i),children:[t.map((x,j)=>a.jsxs("span",{className:"inline-flex items-center gap-1 px-2 py-1 bg-primary text-primary-foreground rounded text-sm",children:[x,a.jsx("button",{type:"button",onClick:()=>g(j),className:"hover:text-red-300 transition-colors",children:a.jsx(Z,{className:"h-3 w-3"})})]},j)),a.jsx("input",{type:"text",value:o,onChange:x=>u(x.target.value),onKeyDown:d,className:"flex-1 outline-none min-w-[100px] bg-transparent text-sm",placeholder:r||e("enterTag")})]})}function z(t){var r,o;const m=me();return((r=t.tutorialUrls)==null?void 0:r[m])||((o=t.tutorialUrls)==null?void 0:o.default)||t.tutorialUrl}const Ie={telegram:"telegram.svg",slack:"slack.svg",discord:"discord.svg",whatsapp:"whatsapp.svg",qq:"qq.svg",feishu:"feishu.svg",dingtalk:"dingtalk.svg",wecom:"wecom.svg",mochat:"mochat.svg",email:"email.svg"};function Te(t,m){const i=m.toLowerCase(),r=t[i];return r?`/logos/${r}`:null}function Y(t){return Te(Ie,t)}const B=[{value:"pairing",label:"pairing"},{value:"allowlist",label:"allowlist"},{value:"open",label:"open"},{value:"disabled",label:"disabled"}],R=[{value:"open",label:"open"},{value:"allowlist",label:"allowlist"},{value:"disabled",label:"disabled"}],Fe=[{value:"off",label:"off"},{value:"partial",label:"partial"},{value:"block",label:"block"},{value:"progress",label:"progress"}],De=t=>t.includes("token")||t.includes("secret")||t.includes("password")?a.jsx(ae,{className:"h-3.5 w-3.5 text-gray-500"}):t.includes("url")||t.includes("host")?a.jsx(te,{className:"h-3.5 w-3.5 text-gray-500"}):t.includes("email")||t.includes("mail")?a.jsx(se,{className:"h-3.5 w-3.5 text-gray-500"}):t.includes("id")||t.includes("from")?a.jsx(ne,{className:"h-3.5 w-3.5 text-gray-500"}):t==="enabled"||t==="consentGranted"?a.jsx(le,{className:"h-3.5 w-3.5 text-gray-500"}):a.jsx(re,{className:"h-3.5 w-3.5 text-gray-500"});function G(){return{telegram:[{name:"enabled",type:"boolean",label:e("enabled")},{name:"token",type:"password",label:e("botToken")},{name:"allowFrom",type:"tags",label:e("allowFrom")},{name:"proxy",type:"text",label:e("proxy")},{name:"accountId",type:"text",label:e("accountId")},{name:"dmPolicy",type:"select",label:e("dmPolicy"),options:B},{name:"groupPolicy",type:"select",label:e("groupPolicy"),options:R},{name:"groupAllowFrom",type:"tags",label:e("groupAllowFrom")},{name:"requireMention",type:"boolean",label:e("requireMention")},{name:"mentionPatterns",type:"tags",label:e("mentionPatterns")},{name:"groups",type:"json",label:e("groupRulesJson")}],discord:[{name:"enabled",type:"boolean",label:e("enabled")},{name:"token",type:"password",label:e("botToken")},{name:"allowBots",type:"boolean",label:e("allowBotMessages")},{name:"allowFrom",type:"tags",label:e("allowFrom")},{name:"gatewayUrl",type:"text",label:e("gatewayUrl")},{name:"intents",type:"number",label:e("intents")},{name:"proxy",type:"text",label:e("proxy")},{name:"mediaMaxMb",type:"number",label:e("attachmentMaxSizeMb")},{name:"streaming",type:"select",label:e("streamingMode"),options:Fe},{name:"draftChunk",type:"json",label:e("draftChunkingJson")},{name:"textChunkLimit",type:"number",label:e("textChunkLimit")},{name:"accountId",type:"text",label:e("accountId")},{name:"dmPolicy",type:"select",label:e("dmPolicy"),options:B},{name:"groupPolicy",type:"select",label:e("groupPolicy"),options:R},{name:"groupAllowFrom",type:"tags",label:e("groupAllowFrom")},{name:"requireMention",type:"boolean",label:e("requireMention")},{name:"mentionPatterns",type:"tags",label:e("mentionPatterns")},{name:"groups",type:"json",label:e("groupRulesJson")}],whatsapp:[{name:"enabled",type:"boolean",label:e("enabled")},{name:"bridgeUrl",type:"text",label:e("bridgeUrl")},{name:"allowFrom",type:"tags",label:e("allowFrom")}],feishu:[{name:"enabled",type:"boolean",label:e("enabled")},{name:"appId",type:"text",label:e("appId")},{name:"appSecret",type:"password",label:e("appSecret")},{name:"encryptKey",type:"password",label:e("encryptKey")},{name:"verificationToken",type:"password",label:e("verificationToken")},{name:"allowFrom",type:"tags",label:e("allowFrom")}],dingtalk:[{name:"enabled",type:"boolean",label:e("enabled")},{name:"clientId",type:"text",label:e("clientId")},{name:"clientSecret",type:"password",label:e("clientSecret")},{name:"allowFrom",type:"tags",label:e("allowFrom")}],wecom:[{name:"enabled",type:"boolean",label:e("enabled")},{name:"corpId",type:"text",label:e("corpId")},{name:"agentId",type:"text",label:e("agentId")},{name:"secret",type:"password",label:e("secret")},{name:"token",type:"password",label:e("token")},{name:"callbackPort",type:"number",label:e("callbackPort")},{name:"callbackPath",type:"text",label:e("callbackPath")},{name:"allowFrom",type:"tags",label:e("allowFrom")}],slack:[{name:"enabled",type:"boolean",label:e("enabled")},{name:"mode",type:"text",label:e("mode")},{name:"webhookPath",type:"text",label:e("webhookPath")},{name:"allowBots",type:"boolean",label:e("allowBotMessages")},{name:"botToken",type:"password",label:e("botToken")},{name:"appToken",type:"password",label:e("appToken")}],email:[{name:"enabled",type:"boolean",label:e("enabled")},{name:"consentGranted",type:"boolean",label:e("consentGranted")},{name:"imapHost",type:"text",label:e("imapHost")},{name:"imapPort",type:"number",label:e("imapPort")},{name:"imapUsername",type:"text",label:e("imapUsername")},{name:"imapPassword",type:"password",label:e("imapPassword")},{name:"fromAddress",type:"email",label:e("fromAddress")}],mochat:[{name:"enabled",type:"boolean",label:e("enabled")},{name:"baseUrl",type:"text",label:e("baseUrl")},{name:"clawToken",type:"password",label:e("clawToken")},{name:"agentUserId",type:"text",label:e("agentUserId")},{name:"allowFrom",type:"tags",label:e("allowFrom")}],qq:[{name:"enabled",type:"boolean",label:e("enabled")},{name:"appId",type:"text",label:e("appId")},{name:"secret",type:"password",label:e("appSecret")},{name:"markdownSupport",type:"boolean",label:e("markdownSupport")},{name:"allowFrom",type:"tags",label:e("allowFrom")}]}}function A(t){return typeof t=="object"&&t!==null&&!Array.isArray(t)}function V(t,m){const i={...t};for(const[r,o]of Object.entries(m)){const u=i[r];if(A(u)&&A(o)){i[r]=V(u,o);continue}i[r]=o}return i}function Ae(t,m){const i=t.split("."),r={};let o=r;for(let u=0;u<i.length-1;u+=1){const d=i[u];o[d]={},o=o[d]}return o[i[i.length-1]]=m,r}function Le({channelName:t}){var O,U;const{data:m}=q(),{data:i}=$(),{data:r}=H(),o=pe(),u=de(),[d,g]=v.useState({}),[x,j]=v.useState({}),[h,f]=v.useState(null),k=t?m==null?void 0:m.channels[t]:null,w=t?G()[t]??[]:[],c=r==null?void 0:r.uiHints,p=t?`channels.${t}`:null,S=((O=r==null?void 0:r.actions)==null?void 0:O.filter(s=>s.scope===p))??[],C=t&&(((U=_(`channels.${t}`,c))==null?void 0:U.label)??t),P=i==null?void 0:i.channels.find(s=>s.name===t),T=P?z(P):void 0;v.useEffect(()=>{if(k){g({...k});const s={};(t?G()[t]??[]:[]).filter(l=>l.type==="json").forEach(l=>{const y=k[l.name];s[l.name]=JSON.stringify(y??{},null,2)}),j(s)}else g({}),j({})},[k,t]);const N=(s,n)=>{g(l=>({...l,[s]:n}))},L=s=>{if(s.preventDefault(),!t)return;const n={...d};for(const l of w){if(l.type!=="password")continue;const y=n[l.name];(typeof y!="string"||y.length===0)&&delete n[l.name]}for(const l of w){if(l.type!=="json")continue;const y=x[l.name]??"";try{n[l.name]=y.trim()?JSON.parse(y):{}}catch{F.error(`${e("invalidJson")}: ${l.name}`);return}}o.mutate({channel:t,data:n})},Q=s=>{if(!s||!t)return;const n=s.channels;if(!A(n))return;const l=n[t];A(l)&&g(y=>V(y,l))},W=async s=>{if(!(!t||!p)){f(s.id);try{let n={...d};s.saveBeforeRun&&(n={...n,...s.savePatch??{}},g(n),await o.mutateAsync({channel:t,data:n}));const l=await u.mutateAsync({actionId:s.id,data:{scope:p,draftConfig:Ae(p,n)}});Q(l.patch),l.ok?F.success(l.message||e("success")):F.error(l.message||e("error"))}catch(n){const l=n instanceof Error?n.message:String(n);F.error(`${e("error")}: ${l}`)}finally{f(null)}}};if(!t||!P||!k)return a.jsx("div",{className:we,children:a.jsxs("div",{children:[a.jsx("h3",{className:"text-base font-semibold text-gray-900",children:e("channelsSelectTitle")}),a.jsx("p",{className:"mt-2 text-sm text-gray-500",children:e("channelsSelectDescription")})]})});const M=!!k.enabled;return a.jsxs("div",{className:ve,children:[a.jsx("div",{className:"border-b border-gray-100 px-6 py-5",children:a.jsxs("div",{className:"flex flex-wrap items-center justify-between gap-3",children:[a.jsxs("div",{className:"min-w-0",children:[a.jsxs("div",{className:"flex items-center gap-3",children:[a.jsx(K,{name:t,src:Y(t),className:I("h-9 w-9 rounded-lg border",M?"border-primary/30 bg-white":"border-gray-200/70 bg-white"),imgClassName:"h-5 w-5 object-contain",fallback:a.jsx("span",{className:"text-sm font-semibold uppercase text-gray-500",children:t[0]})}),a.jsx("h3",{className:"truncate text-lg font-semibold text-gray-900 capitalize",children:C})]}),a.jsx("p",{className:"mt-2 text-sm text-gray-500",children:e("channelsFormDescription")}),T&&a.jsxs("a",{href:T,className:"mt-2 inline-flex items-center gap-1.5 text-xs text-primary transition-colors hover:text-primary-hover",children:[a.jsx(ee,{className:"h-3.5 w-3.5"}),e("channelsGuideTitle")]})]}),a.jsx(J,{status:M?"active":"inactive",label:M?e("statusActive"):e("statusInactive")})]})}),a.jsxs("form",{onSubmit:L,className:"flex min-h-0 flex-1 flex-col",children:[a.jsx("div",{className:"min-h-0 flex-1 space-y-6 overflow-y-auto overscroll-contain px-6 py-5",children:w.map(s=>{const n=t?_(`channels.${t}.${s.name}`,c):void 0,l=(n==null?void 0:n.label)??s.label,y=n==null?void 0:n.placeholder;return a.jsxs("div",{className:"space-y-2.5",children:[a.jsxs(he,{htmlFor:s.name,className:"flex items-center gap-2 text-sm font-medium text-gray-900",children:[De(s.name),l]}),s.type==="boolean"&&a.jsxs("div",{className:"flex items-center justify-between rounded-xl bg-gray-50 p-3",children:[a.jsx("span",{className:"text-sm text-gray-500",children:d[s.name]?e("enabled"):e("disabled")}),a.jsx(fe,{id:s.name,checked:d[s.name]||!1,onCheckedChange:b=>N(s.name,b),className:"data-[state=checked]:bg-emerald-500"})]}),(s.type==="text"||s.type==="email")&&a.jsx(D,{id:s.name,type:s.type,value:d[s.name]||"",onChange:b=>N(s.name,b.target.value),placeholder:y,className:"rounded-xl"}),s.type==="password"&&a.jsx(D,{id:s.name,type:"password",value:d[s.name]||"",onChange:b=>N(s.name,b.target.value),placeholder:y??e("leaveBlankToKeepUnchanged"),className:"rounded-xl"}),s.type==="number"&&a.jsx(D,{id:s.name,type:"number",value:d[s.name]||0,onChange:b=>N(s.name,parseInt(b.target.value,10)||0),placeholder:y,className:"rounded-xl"}),s.type==="tags"&&a.jsx(Pe,{value:d[s.name]||[],onChange:b=>N(s.name,b)}),s.type==="select"&&a.jsxs(be,{value:d[s.name]||"",onValueChange:b=>N(s.name,b),children:[a.jsx(ue,{className:"rounded-xl",children:a.jsx(xe,{})}),a.jsx(ye,{children:(s.options??[]).map(b=>a.jsx(ge,{value:b.value,children:b.label},b.value))})]}),s.type==="json"&&a.jsx("textarea",{id:s.name,value:x[s.name]??"{}",onChange:b=>j(X=>({...X,[s.name]:b.target.value})),className:"min-h-[120px] w-full resize-none rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-mono"})]},s.name)})}),a.jsxs("div",{className:"flex flex-wrap items-center justify-between gap-3 border-t border-gray-100 px-6 py-4",children:[a.jsx("div",{className:"flex flex-wrap items-center gap-2",children:S.filter(s=>s.trigger==="manual").map(s=>a.jsx(E,{type:"button",onClick:()=>W(s),disabled:o.isPending||!!h,variant:"secondary",children:h===s.id?e("connecting"):s.title},s.id))}),a.jsx(E,{type:"submit",disabled:o.isPending||!!h,children:o.isPending?e("saving"):e("save")})]})]})]})}const Me={telegram:"channelDescTelegram",slack:"channelDescSlack",email:"channelDescEmail",webhook:"channelDescWebhook",discord:"channelDescDiscord",feishu:"channelDescFeishu"};function Je(){const{data:t}=q(),{data:m}=$(),{data:i}=H(),[r,o]=v.useState("enabled"),[u,d]=v.useState(),[g,x]=v.useState(""),j=i==null?void 0:i.uiHints,h=m==null?void 0:m.channels,f=t==null?void 0:t.channels,k=[{id:"enabled",label:e("channelsTabEnabled"),count:(h??[]).filter(c=>{var p;return(p=f==null?void 0:f[c.name])==null?void 0:p.enabled}).length},{id:"all",label:e("channelsTabAll"),count:(h??[]).length}],w=v.useMemo(()=>{const c=g.trim().toLowerCase();return(h??[]).filter(p=>{var C;const S=((C=f==null?void 0:f[p.name])==null?void 0:C.enabled)||!1;return r==="enabled"?S:!0}).filter(p=>c?(p.displayName||p.name).toLowerCase().includes(c)||p.name.toLowerCase().includes(c):!0)},[r,f,h,g]);return v.useEffect(()=>{if(w.length===0){d(void 0);return}w.some(p=>p.name===u)||d(w[0].name)},[w,u]),!t||!m?a.jsx("div",{className:"p-8 text-gray-400",children:e("channelsLoading")}):a.jsxs(Ce,{className:"xl:flex xl:h-full xl:min-h-0 xl:flex-col xl:pb-0",children:[a.jsx(Ne,{title:e("channelsPageTitle"),description:e("channelsPageDescription")}),a.jsxs("div",{className:I(ke,"xl:min-h-0 xl:flex-1"),children:[a.jsxs("section",{className:je,children:[a.jsx("div",{className:"border-b border-gray-100 px-4 pt-4",children:a.jsx(Se,{tabs:k,activeTab:r,onChange:o,className:"mb-0"})}),a.jsx("div",{className:"border-b border-gray-100 px-4 py-3",children:a.jsxs("div",{className:"relative",children:[a.jsx(oe,{className:"pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400"}),a.jsx(D,{value:g,onChange:c=>x(c.target.value),placeholder:e("channelsFilterPlaceholder"),className:"h-10 rounded-xl pl-9"})]})}),a.jsxs("div",{className:"min-h-0 flex-1 space-y-2 overflow-y-auto overscroll-contain p-3",children:[w.map(c=>{const p=t.channels[c.name],S=(p==null?void 0:p.enabled)||!1,C=_(`channels.${c.name}`,j),P=z(c),T=(C==null?void 0:C.help)||e(Me[c.name]||"channelDescriptionDefault"),N=u===c.name;return a.jsx("button",{type:"button",onClick:()=>d(c.name),className:I("w-full rounded-xl border p-2.5 text-left transition-all",N?"border-primary/30 bg-primary-50/40 shadow-sm":"border-gray-200/70 bg-white hover:border-gray-300 hover:bg-gray-50/70"),children:a.jsxs("div",{className:"flex items-start justify-between gap-3",children:[a.jsxs("div",{className:"flex min-w-0 items-center gap-3",children:[a.jsx(K,{name:c.name,src:Y(c.name),className:I("h-10 w-10 rounded-lg border",S?"border-primary/30 bg-white":"border-gray-200/70 bg-white"),imgClassName:"h-5 w-5 object-contain",fallback:a.jsx("span",{className:"text-sm font-semibold uppercase text-gray-500",children:c.name[0]})}),a.jsxs("div",{className:"min-w-0",children:[a.jsx("p",{className:"truncate text-sm font-semibold text-gray-900",children:c.displayName||c.name}),a.jsx("p",{className:"line-clamp-1 text-[11px] text-gray-500",children:T})]})]}),a.jsxs("div",{className:"flex items-center gap-2",children:[P&&a.jsx("a",{href:P,onClick:L=>L.stopPropagation(),className:"inline-flex h-7 w-7 items-center justify-center rounded-md text-gray-300 transition-colors hover:bg-gray-100/70 hover:text-gray-500",title:e("channelsGuideTitle"),children:a.jsx(ce,{className:"h-3.5 w-3.5"})}),a.jsx(J,{status:S?"active":"inactive",label:S?e("statusActive"):e("statusInactive"),className:"min-w-[56px] justify-center"})]})]})},c.name)}),w.length===0&&a.jsxs("div",{className:"flex h-full min-h-[220px] flex-col items-center justify-center rounded-xl border border-dashed border-gray-200 bg-gray-50/70 py-10 text-center",children:[a.jsx("div",{className:"mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-white",children:a.jsx(ie,{className:"h-5 w-5 text-gray-300"})}),a.jsx("p",{className:"text-sm font-medium text-gray-700",children:e("channelsNoMatch")})]})]})]}),a.jsx(Le,{channelName:u})]})]})}export{Je as ChannelsList};