@nextclaw/ui 0.9.4 → 0.9.5

package/src/components/remote/RemoteAccessPage.tsx

@@ -18,6 +18,7 @@ import { StatusDot } from '@/components/ui/status-dot';
 import { Switch } from '@/components/ui/switch';
 import { formatDateTime, t } from '@/lib/i18n';
 import { Activity, KeyRound, Laptop, RefreshCcw, ServerCog, ShieldCheck, SquareTerminal } from 'lucide-react';
+import type { RemoteAccessView, RemoteDoctorView } from '@/api/remote.types';
 
 function getRuntimeStatus(runtime: RemoteRuntimeView | null): { status: 'active' | 'inactive' | 'ready' | 'setup' | 'warning'; label: string } {
   if (!runtime) {
@@ -57,37 +58,23 @@ function KeyValueRow(props: { label: string; value?: string | number | null; mut
   );
 }
 
-export function RemoteAccessPage() {
-  const remoteStatus = useRemoteStatus();
-  const browserAuthStartMutation = useRemoteBrowserAuthStart();
-  const browserAuthPollMutation = useRemoteBrowserAuthPoll();
-  const logoutMutation = useRemoteLogout();
-  const settingsMutation = useRemoteSettings();
-  const doctorMutation = useRemoteDoctor();
-  const serviceMutation = useRemoteServiceControl();
-
-  const status = remoteStatus.data;
-  const runtimeStatus = useMemo(() => getRuntimeStatus(status?.runtime ?? null), [status?.runtime]);
-  const serviceStatus = useMemo(() => getServiceStatus(status?.service ?? { running: false, currentProcess: false }), [status?.service]);
+function resolvePlatformApiBase(platformApiBase: string, status: RemoteAccessView | undefined) {
+  return platformApiBase.trim() || status?.settings.platformApiBase || status?.account.apiBase || undefined;
+}
 
-  const [enabled, setEnabled] = useState(false);
-  const [deviceName, setDeviceName] = useState('');
-  const [platformApiBase, setPlatformApiBase] = useState('');
+function useRemoteBrowserAuthFlow(props: {
+  status: RemoteAccessView | undefined;
+  platformApiBase: string;
+  startBrowserAuth: ReturnType<typeof useRemoteBrowserAuthStart>;
+  pollBrowserAuth: ReturnType<typeof useRemoteBrowserAuthPoll>;
+}) {
+  const { status, platformApiBase, startBrowserAuth, pollBrowserAuth } = props;
   const [authSessionId, setAuthSessionId] = useState<string | null>(null);
   const [authVerificationUri, setAuthVerificationUri] = useState<string | null>(null);
   const [authStatusMessage, setAuthStatusMessage] = useState('');
   const [authExpiresAt, setAuthExpiresAt] = useState<string | null>(null);
   const [authPollIntervalMs, setAuthPollIntervalMs] = useState(1500);
 
-  useEffect(() => {
-    if (!status) {
-      return;
-    }
-    setEnabled(status.settings.enabled);
-    setDeviceName(status.settings.deviceName);
-    setPlatformApiBase(status.settings.platformApiBase);
-  }, [status]);
-
   useEffect(() => {
     if (!status?.account.loggedIn) {
       return;
@@ -107,9 +94,9 @@ export function RemoteAccessPage() {
     let cancelled = false;
     const timerId = window.setTimeout(async () => {
       try {
-        const result = await browserAuthPollMutation.mutateAsync({
+        const result = await pollBrowserAuth.mutateAsync({
           sessionId: authSessionId,
-          apiBase: platformApiBase.trim() || status?.settings.platformApiBase || status?.account.apiBase || undefined
+          apiBase: resolvePlatformApiBase(platformApiBase, status)
         });
         if (cancelled) {
           return;
@@ -141,19 +128,12 @@ export function RemoteAccessPage() {
       cancelled = true;
       window.clearTimeout(timerId);
     };
-  }, [
-    authPollIntervalMs,
-    authSessionId,
-    browserAuthPollMutation,
-    platformApiBase,
-    status?.account.apiBase,
-    status?.account.loggedIn,
-    status?.settings.platformApiBase
-  ]);
-
-  const handleStartBrowserAuth = async () => {
-    const apiBase = platformApiBase.trim() || status?.settings.platformApiBase || status?.account.apiBase || undefined;
-    const result = await browserAuthStartMutation.mutateAsync({ apiBase });
+  }, [authPollIntervalMs, authSessionId, platformApiBase, pollBrowserAuth, status]);
+
+  const start = async () => {
+    const result = await startBrowserAuth.mutateAsync({
+      apiBase: resolvePlatformApiBase(platformApiBase, status)
+    });
     setAuthSessionId(result.sessionId);
     setAuthVerificationUri(result.verificationUri);
     setAuthExpiresAt(result.expiresAt);
@@ -165,232 +145,345 @@ export function RemoteAccessPage() {
     }
   };
 
-  const handleResumeBrowserAuth = () => {
+  const resume = () => {
     if (!authVerificationUri) {
       return;
     }
     window.open(authVerificationUri, '_blank', 'noopener,noreferrer');
   };
 
-  if (remoteStatus.isLoading && !status) {
-    return <div className="p-8 text-gray-400">{t('remoteLoading')}</div>;
-  }
+  return {
+    authExpiresAt,
+    authSessionId,
+    authStatusMessage,
+    authVerificationUri,
+    resume,
+    start
+  };
+}
 
+function RemoteOverviewCard(props: {
+  status: RemoteAccessView | undefined;
+  runtimeStatus: { status: 'active' | 'inactive' | 'ready' | 'setup' | 'warning'; label: string };
+  serviceStatus: { status: 'active' | 'inactive' | 'ready' | 'setup' | 'warning'; label: string };
+}) {
   return (
-    <PageLayout className="space-y-6">
-      <PageHeader title={t('remotePageTitle')} description={t('remotePageDescription')} />
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Activity className="h-4 w-4 text-primary" />
+          {t('remoteOverviewTitle')}
+        </CardTitle>
+        <CardDescription>{t('remoteOverviewDescription')}</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-5">
+        <div className="flex flex-wrap gap-2">
+          <StatusDot status={props.status?.account.loggedIn ? 'ready' : 'inactive'} label={props.status?.account.loggedIn ? t('remoteAccountConnected') : t('remoteAccountNotConnected')} />
+          <StatusDot status={props.serviceStatus.status} label={props.serviceStatus.label} />
+          <StatusDot status={props.runtimeStatus.status} label={props.runtimeStatus.label} />
+        </div>
 
-      <div className="grid gap-6 xl:grid-cols-[1.35fr_0.95fr]">
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <Activity className="h-4 w-4 text-primary" />
-              {t('remoteOverviewTitle')}
-            </CardTitle>
-            <CardDescription>{t('remoteOverviewDescription')}</CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-5">
-            <div className="flex flex-wrap gap-2">
-              <StatusDot status={status?.account.loggedIn ? 'ready' : 'inactive'} label={status?.account.loggedIn ? t('remoteAccountConnected') : t('remoteAccountNotConnected')} />
-              <StatusDot status={serviceStatus.status} label={serviceStatus.label} />
-              <StatusDot status={runtimeStatus.status} label={runtimeStatus.label} />
+        <div className="rounded-2xl border border-gray-200/70 bg-gray-50/70 px-4 py-3">
+          <KeyValueRow label={t('remoteLocalOrigin')} value={props.status?.localOrigin} />
+          <KeyValueRow label={t('remotePublicPlatform')} value={props.status?.platformBase ?? props.status?.account.platformBase} />
+          <KeyValueRow label={t('remoteDeviceId')} value={props.status?.runtime?.deviceId} muted />
+          <KeyValueRow label={t('remoteLastConnectedAt')} value={props.status?.runtime?.lastConnectedAt ? formatDateTime(props.status.runtime.lastConnectedAt) : '-'} muted />
+          <KeyValueRow label={t('remoteLastError')} value={props.status?.runtime?.lastError} muted />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+function RemoteDeviceCard(props: {
+  enabled: boolean;
+  setEnabled: (value: boolean) => void;
+  deviceName: string;
+  setDeviceName: (value: string) => void;
+  platformApiBase: string;
+  setPlatformApiBase: (value: string) => void;
+  settingsMutation: ReturnType<typeof useRemoteSettings>;
+  serviceMutation: ReturnType<typeof useRemoteServiceControl>;
+}) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Laptop className="h-4 w-4 text-primary" />
+          {t('remoteDeviceTitle')}
+        </CardTitle>
+        <CardDescription>{t('remoteDeviceDescription')}</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-2">
+          <div className="flex items-center justify-between rounded-2xl border border-gray-200/70 px-4 py-3">
+            <div>
+              <p className="text-sm font-medium text-gray-900">{t('remoteEnabled')}</p>
+              <p className="mt-1 text-xs text-gray-500">{t('remoteEnabledHelp')}</p>
             </div>
+            <Switch checked={props.enabled} onCheckedChange={props.setEnabled} />
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="remote-device-name">{t('remoteDeviceName')}</Label>
+          <Input id="remote-device-name" value={props.deviceName} onChange={(event) => props.setDeviceName(event.target.value)} placeholder={t('remoteDeviceNamePlaceholder')} />
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="remote-platform-api-base">{t('remotePlatformApiBase')}</Label>
+          <Input
+            id="remote-platform-api-base"
+            value={props.platformApiBase}
+            onChange={(event) => props.setPlatformApiBase(event.target.value)}
+            placeholder="https://ai-gateway-api.nextclaw.io/v1"
+          />
+          <p className="text-xs text-gray-500">{t('remotePlatformApiBaseHelp')}</p>
+        </div>
 
+        <div className="flex flex-wrap gap-3">
+          <Button
+            onClick={() =>
+              props.settingsMutation.mutate({
+                enabled: props.enabled,
+                deviceName: props.deviceName,
+                platformApiBase: props.platformApiBase
+              })
+            }
+            disabled={props.settingsMutation.isPending}
+          >
+            {props.settingsMutation.isPending ? t('saving') : t('remoteSaveSettings')}
+          </Button>
+          <Button variant="outline" onClick={() => props.serviceMutation.mutate('restart')} disabled={props.serviceMutation.isPending}>
+            <RefreshCcw className="mr-2 h-4 w-4" />
+            {t('remoteRestartService')}
+          </Button>
+        </div>
+        <p className="text-xs text-gray-500">{t('remoteSaveHint')}</p>
+      </CardContent>
+    </Card>
+  );
+}
+
+function RemoteAccountCard(props: {
+  status: RemoteAccessView | undefined;
+  platformApiBase: string;
+  browserAuthStartMutation: ReturnType<typeof useRemoteBrowserAuthStart>;
+  logoutMutation: ReturnType<typeof useRemoteLogout>;
+  authSessionId: string | null;
+  authExpiresAt: string | null;
+  authStatusMessage: string;
+  authVerificationUri: string | null;
+  onStartBrowserAuth: () => Promise<void>;
+  onResumeBrowserAuth: () => void;
+}) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <KeyRound className="h-4 w-4 text-primary" />
+          {t('remoteAccountTitle')}
+        </CardTitle>
+        <CardDescription>{t('remoteAccountDescription')}</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {props.status?.account.loggedIn ? (
+          <>
             <div className="rounded-2xl border border-gray-200/70 bg-gray-50/70 px-4 py-3">
-              <KeyValueRow label={t('remoteLocalOrigin')} value={status?.localOrigin} />
-              <KeyValueRow label={t('remotePublicPlatform')} value={status?.platformBase ?? status?.account.platformBase} />
-              <KeyValueRow label={t('remoteDeviceId')} value={status?.runtime?.deviceId} muted />
-              <KeyValueRow label={t('remoteLastConnectedAt')} value={status?.runtime?.lastConnectedAt ? formatDateTime(status.runtime.lastConnectedAt) : '-'} muted />
-              <KeyValueRow label={t('remoteLastError')} value={status?.runtime?.lastError} muted />
+              <KeyValueRow label={t('remoteAccountEmail')} value={props.status.account.email} />
+              <KeyValueRow label={t('remoteAccountRole')} value={props.status.account.role} />
+              <KeyValueRow label={t('remoteApiBase')} value={props.status.account.apiBase} />
             </div>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <Laptop className="h-4 w-4 text-primary" />
-              {t('remoteDeviceTitle')}
-            </CardTitle>
-            <CardDescription>{t('remoteDeviceDescription')}</CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="space-y-2">
-              <div className="flex items-center justify-between rounded-2xl border border-gray-200/70 px-4 py-3">
-                <div>
-                  <p className="text-sm font-medium text-gray-900">{t('remoteEnabled')}</p>
-                  <p className="mt-1 text-xs text-gray-500">{t('remoteEnabledHelp')}</p>
-                </div>
-                <Switch checked={enabled} onCheckedChange={setEnabled} />
+            <Button variant="outline" onClick={() => props.logoutMutation.mutate()} disabled={props.logoutMutation.isPending}>
+              {props.logoutMutation.isPending ? t('remoteLoggingOut') : t('remoteLogout')}
+            </Button>
+          </>
+        ) : (
+          <>
+            <div className="rounded-2xl border border-gray-200/70 bg-gray-50/70 px-4 py-3">
+              <p className="text-sm font-medium text-gray-900">{t('remoteBrowserAuthTitle')}</p>
+              <p className="mt-1 text-sm text-gray-600">{t('remoteBrowserAuthDescription')}</p>
+              <div className="mt-3 border-t border-white/80 pt-3">
+                <KeyValueRow label={t('remoteApiBase')} value={props.platformApiBase || props.status?.settings.platformApiBase || props.status?.account.apiBase} muted />
+                <KeyValueRow label={t('remoteBrowserAuthSession')} value={props.authSessionId} muted />
+                <KeyValueRow label={t('remoteBrowserAuthExpiresAt')} value={props.authExpiresAt ? formatDateTime(props.authExpiresAt) : '-'} muted />
               </div>
             </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="remote-device-name">{t('remoteDeviceName')}</Label>
-              <Input id="remote-device-name" value={deviceName} onChange={(event) => setDeviceName(event.target.value)} placeholder={t('remoteDeviceNamePlaceholder')} />
+            {props.authStatusMessage ? <p className="text-sm text-gray-600">{props.authStatusMessage}</p> : null}
+            <div className="flex flex-wrap gap-3">
+              <Button onClick={props.onStartBrowserAuth} disabled={props.browserAuthStartMutation.isPending || !!props.authSessionId}>
+                {props.browserAuthStartMutation.isPending
+                  ? t('remoteBrowserAuthStarting')
+                  : props.authSessionId
+                    ? t('remoteBrowserAuthAuthorizing')
+                    : t('remoteBrowserAuthAction')}
+              </Button>
+              {props.authVerificationUri ? (
+                <Button variant="outline" onClick={props.onResumeBrowserAuth}>
+                  {t('remoteBrowserAuthResume')}
+                </Button>
+              ) : null}
             </div>
+            <p className="text-xs text-gray-500">{t('remoteBrowserAuthHint')}</p>
+          </>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
 
-            <div className="space-y-2">
-              <Label htmlFor="remote-platform-api-base">{t('remotePlatformApiBase')}</Label>
-              <Input
-                id="remote-platform-api-base"
-                value={platformApiBase}
-                onChange={(event) => setPlatformApiBase(event.target.value)}
-                placeholder="https://ai-gateway-api.nextclaw.io/v1"
-              />
-              <p className="text-xs text-gray-500">{t('remotePlatformApiBaseHelp')}</p>
-            </div>
+function RemoteServiceCard(props: {
+  status: RemoteAccessView | undefined;
+  serviceMutation: ReturnType<typeof useRemoteServiceControl>;
+}) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <ServerCog className="h-4 w-4 text-primary" />
+          {t('remoteServiceTitle')}
+        </CardTitle>
+        <CardDescription>{t('remoteServiceDescription')}</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="rounded-2xl border border-gray-200/70 bg-gray-50/70 px-4 py-3">
+          <KeyValueRow label={t('remoteServicePid')} value={props.status?.service.pid} />
+          <KeyValueRow label={t('remoteServiceUiUrl')} value={props.status?.service.uiUrl} />
+          <KeyValueRow label={t('remoteServiceCurrentProcess')} value={props.status?.service.currentProcess ? t('yes') : t('no')} />
+        </div>
+        <div className="flex flex-wrap gap-3">
+          <Button variant="primary" onClick={() => props.serviceMutation.mutate('start')} disabled={props.serviceMutation.isPending}>
+            {t('remoteStartService')}
+          </Button>
+          <Button variant="outline" onClick={() => props.serviceMutation.mutate('restart')} disabled={props.serviceMutation.isPending}>
+            {t('remoteRestartService')}
+          </Button>
+          <Button variant="outline" onClick={() => props.serviceMutation.mutate('stop')} disabled={props.serviceMutation.isPending}>
+            {t('remoteStopService')}
+          </Button>
+        </div>
+        <p className="text-xs text-gray-500">{t('remoteServiceHint')}</p>
+      </CardContent>
+    </Card>
+  );
+}
 
-            <div className="flex flex-wrap gap-3">
-              <Button
-                onClick={() =>
-                  settingsMutation.mutate({
-                    enabled,
-                    deviceName,
-                    platformApiBase
-                  })
-                }
-                disabled={settingsMutation.isPending}
-              >
-                {settingsMutation.isPending ? t('saving') : t('remoteSaveSettings')}
-              </Button>
-              <Button
-                variant="outline"
-                onClick={() => serviceMutation.mutate('restart')}
-                disabled={serviceMutation.isPending}
-              >
-                <RefreshCcw className="mr-2 h-4 w-4" />
-                {t('remoteRestartService')}
-              </Button>
+function RemoteDoctorCard(props: {
+  doctorMutation: ReturnType<typeof useRemoteDoctor>;
+}) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <ShieldCheck className="h-4 w-4 text-primary" />
+          {t('remoteDoctorTitle')}
+        </CardTitle>
+        <CardDescription>{t('remoteDoctorDescription')}</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="flex flex-wrap gap-3">
+          <Button variant="outline" onClick={() => props.doctorMutation.mutate()} disabled={props.doctorMutation.isPending}>
+            <SquareTerminal className="mr-2 h-4 w-4" />
+            {props.doctorMutation.isPending ? t('remoteDoctorRunning') : t('remoteRunDoctor')}
+          </Button>
+        </div>
+
+        {props.doctorMutation.data ? <DoctorResultPanel doctor={props.doctorMutation.data} /> : <p className="text-sm text-gray-500">{t('remoteDoctorEmpty')}</p>}
+      </CardContent>
+    </Card>
+  );
+}
+
+function DoctorResultPanel(props: { doctor: RemoteDoctorView }) {
+  return (
+    <div className="rounded-2xl border border-gray-200/70 bg-gray-50/70 px-4 py-3">
+      <KeyValueRow label={t('remoteDoctorGeneratedAt')} value={formatDateTime(props.doctor.generatedAt)} muted />
+      <div className="mt-3 space-y-2">
+        {props.doctor.checks.map((check) => (
+          <div key={check.name} className="rounded-xl border border-white bg-white px-3 py-3">
+            <div className="flex items-center justify-between gap-3">
+              <span className="text-sm font-medium text-gray-900">{check.name}</span>
+              <StatusDot status={check.ok ? 'ready' : 'warning'} label={check.ok ? t('remoteCheckPassed') : t('remoteCheckFailed')} />
             </div>
-            <p className="text-xs text-gray-500">{t('remoteSaveHint')}</p>
-          </CardContent>
-        </Card>
+            <p className="mt-2 text-sm text-gray-600">{check.detail}</p>
+          </div>
+        ))}
       </div>
+    </div>
+  );
+}
 
-      <div className="grid gap-6 xl:grid-cols-[1fr_1fr]">
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <KeyRound className="h-4 w-4 text-primary" />
-              {t('remoteAccountTitle')}
-            </CardTitle>
-            <CardDescription>{t('remoteAccountDescription')}</CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            {status?.account.loggedIn ? (
-              <>
-                <div className="rounded-2xl border border-gray-200/70 bg-gray-50/70 px-4 py-3">
-                  <KeyValueRow label={t('remoteAccountEmail')} value={status.account.email} />
-                  <KeyValueRow label={t('remoteAccountRole')} value={status.account.role} />
-                  <KeyValueRow label={t('remoteApiBase')} value={status.account.apiBase} />
-                </div>
-                <Button variant="outline" onClick={() => logoutMutation.mutate()} disabled={logoutMutation.isPending}>
-                  {logoutMutation.isPending ? t('remoteLoggingOut') : t('remoteLogout')}
-                </Button>
-              </>
-            ) : (
-              <>
-                <div className="rounded-2xl border border-gray-200/70 bg-gray-50/70 px-4 py-3">
-                  <p className="text-sm font-medium text-gray-900">{t('remoteBrowserAuthTitle')}</p>
-                  <p className="mt-1 text-sm text-gray-600">{t('remoteBrowserAuthDescription')}</p>
-                  <div className="mt-3 border-t border-white/80 pt-3">
-                    <KeyValueRow label={t('remoteApiBase')} value={platformApiBase || status?.settings.platformApiBase || status?.account.apiBase} muted />
-                    <KeyValueRow label={t('remoteBrowserAuthSession')} value={authSessionId} muted />
-                    <KeyValueRow
-                      label={t('remoteBrowserAuthExpiresAt')}
-                      value={authExpiresAt ? formatDateTime(authExpiresAt) : '-'}
-                      muted
-                    />
-                  </div>
-                </div>
-                {authStatusMessage ? <p className="text-sm text-gray-600">{authStatusMessage}</p> : null}
-                <div className="flex flex-wrap gap-3">
-                  <Button onClick={handleStartBrowserAuth} disabled={browserAuthStartMutation.isPending || !!authSessionId}>
-                    {browserAuthStartMutation.isPending
-                      ? t('remoteBrowserAuthStarting')
-                      : authSessionId
-                        ? t('remoteBrowserAuthAuthorizing')
-                        : t('remoteBrowserAuthAction')}
-                  </Button>
-                  {authVerificationUri ? (
-                    <Button variant="outline" onClick={handleResumeBrowserAuth}>
-                      {t('remoteBrowserAuthResume')}
-                    </Button>
-                  ) : null}
-                </div>
-                <p className="text-xs text-gray-500">{t('remoteBrowserAuthHint')}</p>
-              </>
-            )}
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <ServerCog className="h-4 w-4 text-primary" />
-              {t('remoteServiceTitle')}
-            </CardTitle>
-            <CardDescription>{t('remoteServiceDescription')}</CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="rounded-2xl border border-gray-200/70 bg-gray-50/70 px-4 py-3">
-              <KeyValueRow label={t('remoteServicePid')} value={status?.service.pid} />
-              <KeyValueRow label={t('remoteServiceUiUrl')} value={status?.service.uiUrl} />
-              <KeyValueRow label={t('remoteServiceCurrentProcess')} value={status?.service.currentProcess ? t('yes') : t('no')} />
-            </div>
-            <div className="flex flex-wrap gap-3">
-              <Button variant="primary" onClick={() => serviceMutation.mutate('start')} disabled={serviceMutation.isPending}>
-                {t('remoteStartService')}
-              </Button>
-              <Button variant="outline" onClick={() => serviceMutation.mutate('restart')} disabled={serviceMutation.isPending}>
-                {t('remoteRestartService')}
-              </Button>
-              <Button variant="outline" onClick={() => serviceMutation.mutate('stop')} disabled={serviceMutation.isPending}>
-                {t('remoteStopService')}
-              </Button>
-            </div>
-            <p className="text-xs text-gray-500">{t('remoteServiceHint')}</p>
-          </CardContent>
-        </Card>
+export function RemoteAccessPage() {
+  const remoteStatus = useRemoteStatus();
+  const browserAuthStartMutation = useRemoteBrowserAuthStart();
+  const browserAuthPollMutation = useRemoteBrowserAuthPoll();
+  const logoutMutation = useRemoteLogout();
+  const settingsMutation = useRemoteSettings();
+  const doctorMutation = useRemoteDoctor();
+  const serviceMutation = useRemoteServiceControl();
+
+  const status = remoteStatus.data;
+  const runtimeStatus = useMemo(() => getRuntimeStatus(status?.runtime ?? null), [status?.runtime]);
+  const serviceStatus = useMemo(() => getServiceStatus(status?.service ?? { running: false, currentProcess: false }), [status?.service]);
+
+  const [enabled, setEnabled] = useState(false);
+  const [deviceName, setDeviceName] = useState('');
+  const [platformApiBase, setPlatformApiBase] = useState('');
+  const browserAuth = useRemoteBrowserAuthFlow({
+    status,
+    platformApiBase,
+    startBrowserAuth: browserAuthStartMutation,
+    pollBrowserAuth: browserAuthPollMutation
+  });
+
+  useEffect(() => {
+    if (!status) {
+      return;
+    }
+    setEnabled(status.settings.enabled);
+    setDeviceName(status.settings.deviceName);
+    setPlatformApiBase(status.settings.platformApiBase);
+  }, [status]);
+
+  if (remoteStatus.isLoading && !status) {
+    return <div className="p-8 text-gray-400">{t('remoteLoading')}</div>;
+  }
+
+  return (
+    <PageLayout className="space-y-6">
+      <PageHeader title={t('remotePageTitle')} description={t('remotePageDescription')} />
+
+      <div className="grid gap-6 xl:grid-cols-[1.35fr_0.95fr]">
+        <RemoteOverviewCard status={status} runtimeStatus={runtimeStatus} serviceStatus={serviceStatus} />
+        <RemoteDeviceCard
+          enabled={enabled}
+          setEnabled={setEnabled}
+          deviceName={deviceName}
+          setDeviceName={setDeviceName}
+          platformApiBase={platformApiBase}
+          setPlatformApiBase={setPlatformApiBase}
+          settingsMutation={settingsMutation}
+          serviceMutation={serviceMutation}
+        />
       </div>
 
-      <Card>
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2">
-            <ShieldCheck className="h-4 w-4 text-primary" />
-            {t('remoteDoctorTitle')}
-          </CardTitle>
-          <CardDescription>{t('remoteDoctorDescription')}</CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <div className="flex flex-wrap gap-3">
-            <Button variant="outline" onClick={() => doctorMutation.mutate()} disabled={doctorMutation.isPending}>
-              <SquareTerminal className="mr-2 h-4 w-4" />
-              {doctorMutation.isPending ? t('remoteDoctorRunning') : t('remoteRunDoctor')}
-            </Button>
-          </div>
+      <div className="grid gap-6 xl:grid-cols-[1fr_1fr]">
+        <RemoteAccountCard
+          status={status}
+          platformApiBase={platformApiBase}
+          browserAuthStartMutation={browserAuthStartMutation}
+          logoutMutation={logoutMutation}
+          authSessionId={browserAuth.authSessionId}
+          authExpiresAt={browserAuth.authExpiresAt}
+          authStatusMessage={browserAuth.authStatusMessage}
+          authVerificationUri={browserAuth.authVerificationUri}
+          onStartBrowserAuth={browserAuth.start}
+          onResumeBrowserAuth={browserAuth.resume}
+        />
+        <RemoteServiceCard status={status} serviceMutation={serviceMutation} />
+      </div>
 
-          {doctorMutation.data ? (
-            <div className="rounded-2xl border border-gray-200/70 bg-gray-50/70 px-4 py-3">
-              <KeyValueRow label={t('remoteDoctorGeneratedAt')} value={formatDateTime(doctorMutation.data.generatedAt)} muted />
-              <div className="mt-3 space-y-2">
-                {doctorMutation.data.checks.map((check) => (
-                  <div key={check.name} className="rounded-xl border border-white bg-white px-3 py-3">
-                    <div className="flex items-center justify-between gap-3">
-                      <span className="text-sm font-medium text-gray-900">{check.name}</span>
-                      <StatusDot status={check.ok ? 'ready' : 'warning'} label={check.ok ? t('remoteCheckPassed') : t('remoteCheckFailed')} />
-                    </div>
-                    <p className="mt-2 text-sm text-gray-600">{check.detail}</p>
-                  </div>
-                ))}
-              </div>
-            </div>
-          ) : (
-            <p className="text-sm text-gray-500">{t('remoteDoctorEmpty')}</p>
-          )}
-        </CardContent>
-      </Card>
+      <RemoteDoctorCard doctorMutation={doctorMutation} />
     </PageLayout>
   );
 }