@nextclaw/ui 0.12.9 → 0.12.11

package/src/features/account/components/account-panel.tsx

@@ -0,0 +1,255 @@
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { NoticeCard } from "@/components/ui/notice-card";
+import { useRemoteStatus } from "@/features/remote";
+import { formatDateTime, t } from "@/lib/i18n";
+import { useAppManager } from "@/app/components/app-manager-provider";
+import { useAccountStore } from "@/features/account/stores/account.store";
+import { KeyRound, LogOut, SquareArrowOutUpRight } from "lucide-react";
+import { useEffect, useState } from "react";
+
+function AccountValueRow({
+  label,
+  value,
+}: {
+  label: string;
+  value?: string | null;
+}) {
+  return (
+    <div className="flex items-start justify-between gap-4 py-2 text-sm">
+      <span className="text-gray-500">{label}</span>
+      <span className="text-right text-gray-900">{value?.trim() || "-"}</span>
+    </div>
+  );
+}
+
+function SignedInAccountSection(props: {
+  email?: string | null;
+  username?: string | null;
+  role?: string | null;
+  canSubmitUsername: boolean;
+  savingUsername: boolean;
+  usernameDraft: string;
+  onUsernameDraftChange: (value: string) => void;
+  onSubmitUsername: () => Promise<void>;
+  onOpenDeviceList: () => Promise<void>;
+  onLogout: () => Promise<void>;
+}) {
+  const {
+    email,
+    username,
+    role,
+    canSubmitUsername,
+    savingUsername,
+    usernameDraft,
+    onUsernameDraftChange,
+    onSubmitUsername,
+    onOpenDeviceList,
+    onLogout,
+  } = props;
+
+  return (
+    <div className="space-y-4">
+      <NoticeCard
+        tone="success"
+        title={t("accountPanelSignedInTitle")}
+        description={t("accountPanelSignedInDescription")}
+      />
+      <NoticeCard tone="neutral">
+        <AccountValueRow label={t("remoteAccountEmail")} value={email} />
+        <AccountValueRow label={t("remoteAccountUsername")} value={username} />
+        <AccountValueRow label={t("remoteAccountRole")} value={role} />
+      </NoticeCard>
+      {username ? (
+        <p className="text-xs text-gray-500">
+          {t("remoteAccountUsernameLockedHelp")}
+        </p>
+      ) : (
+        <NoticeCard
+          tone="warning"
+          title={t("remoteAccountUsernameRequiredTitle")}
+          description={t("remoteAccountUsernameRequiredDescription")}
+        >
+          <div className="mt-4 space-y-2">
+            <Label htmlFor="account-panel-username">
+              {t("remoteAccountUsername")}
+            </Label>
+            <Input
+              id="account-panel-username"
+              value={usernameDraft}
+              onChange={(event) => onUsernameDraftChange(event.target.value)}
+              placeholder={t("remoteAccountUsernamePlaceholder")}
+              autoCapitalize="none"
+              autoCorrect="off"
+              spellCheck={false}
+            />
+          </div>
+          <div className="mt-4 flex flex-wrap gap-3">
+            <Button
+              disabled={!canSubmitUsername}
+              onClick={() => void onSubmitUsername()}
+            >
+              {savingUsername
+                ? t("remoteAccountUsernameSaving")
+                : t("remoteAccountUsernameSave")}
+            </Button>
+          </div>
+        </NoticeCard>
+      )}
+      <div className="flex flex-wrap gap-3">
+        <Button onClick={() => void onOpenDeviceList()}>
+          <SquareArrowOutUpRight className="mr-2 h-4 w-4" />
+          {t("remoteOpenDeviceList")}
+        </Button>
+        <Button variant="outline" onClick={() => void onLogout()}>
+          <LogOut className="mr-2 h-4 w-4" />
+          {t("remoteLogout")}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function SignedOutAccountSection(props: {
+  authSessionId?: string | null;
+  authExpiresAt?: string | null;
+  authStatusMessage?: string | null;
+  authVerificationUri?: string | null;
+  onStartBrowserSignIn: () => Promise<void>;
+  onResumeBrowserSignIn: () => void;
+}) {
+  const {
+    authSessionId,
+    authExpiresAt,
+    authStatusMessage,
+    authVerificationUri,
+    onStartBrowserSignIn,
+    onResumeBrowserSignIn,
+  } = props;
+
+  return (
+    <div className="space-y-4">
+      <NoticeCard
+        tone="neutral"
+        title={t("accountPanelSignedOutTitle")}
+        description={t("accountPanelSignedOutDescription")}
+      >
+        {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}
+      </NoticeCard>
+      {authStatusMessage ? (
+        <p className="text-sm text-gray-600">{authStatusMessage}</p>
+      ) : null}
+      <div className="flex flex-wrap gap-3">
+        <Button onClick={() => void onStartBrowserSignIn()}>
+          {authSessionId
+            ? t("remoteBrowserAuthActionRetry")
+            : t("remoteBrowserAuthAction")}
+        </Button>
+        {authVerificationUri ? (
+          <Button variant="outline" onClick={onResumeBrowserSignIn}>
+            {t("remoteBrowserAuthResume")}
+          </Button>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+export function AccountPanel() {
+  const manager = useAppManager();
+  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;
+  const [usernameDraft, setUsernameDraft] = useState("");
+  const [savingUsername, setSavingUsername] = useState(false);
+
+  useEffect(() => {
+    manager.accountManager.syncRemoteStatus(status);
+  }, [manager, status]);
+
+  const canSubmitUsername =
+    !savingUsername &&
+    usernameDraft.trim().length > 0 &&
+    !status?.account.username;
+
+  return (
+    <Dialog
+      open={panelOpen}
+      onOpenChange={(open) =>
+        open
+          ? manager.accountManager.openAccountPanel()
+          : manager.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 ? (
+          <SignedInAccountSection
+            email={status.account.email}
+            username={status.account.username}
+            role={status.account.role}
+            canSubmitUsername={canSubmitUsername}
+            savingUsername={savingUsername}
+            usernameDraft={usernameDraft}
+            onUsernameDraftChange={setUsernameDraft}
+            onSubmitUsername={async () => {
+              setSavingUsername(true);
+              try {
+                await manager.accountManager.updateUsername(usernameDraft);
+              } finally {
+                setSavingUsername(false);
+              }
+            }}
+            onOpenDeviceList={() => manager.accountManager.openNextClawWeb('/account')}
+            onLogout={() => manager.accountManager.logout()}
+          />
+        ) : (
+          <SignedOutAccountSection
+            authSessionId={authSessionId}
+            authExpiresAt={authExpiresAt}
+            authStatusMessage={authStatusMessage}
+            authVerificationUri={authVerificationUri}
+            onStartBrowserSignIn={() =>
+              manager.accountManager.startBrowserSignIn()
+            }
+            onResumeBrowserSignIn={() =>
+              manager.accountManager.resumeBrowserSignIn()
+            }
+          />
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/features/account/index.ts

@@ -0,0 +1,6 @@
+export { AccountPanel } from './components/account-panel';
+export { AccountManager } from './managers/account.manager';
+export {
+  useAccountStore,
+  type AccountPendingAction,
+} from './stores/account.store';

package/src/{account → features/account}/managers/account.manager.ts

@@ -1,15 +1,15 @@
 import { logoutRemote, pollRemoteBrowserAuth, startRemoteBrowserAuth, updateRemoteAccountProfile } 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';
+} from '@/features/remote';
 import { formatDateTime, t } from '@/lib/i18n';
 import { toast } from 'sonner';
+import type { AccountPendingAction } from '@/features/account/stores/account.store';
+import { useAccountStore } from '@/features/account/stores/account.store';
 
 type SignedInContinuation = (action: AccountPendingAction, status: RemoteAccessView) => Promise<void>;
 
@@ -118,14 +118,15 @@ export class AccountManager {
     }
   };
 
-  openNextClawWeb = async () => {
+  openNextClawWeb = async (path = '/') => {
     const status = await ensureRemoteStatus();
     const webBase = resolveRemoteWebBase(status);
     if (!webBase) {
       toast.error(t('remoteOpenWebUnavailable'));
       return;
     }
-    window.open(webBase, '_blank', 'noopener,noreferrer');
+    const targetUrl = new URL(path, `${webBase.replace(/\/+$/, '')}/`).toString();
+    window.open(targetUrl, '_blank', 'noopener,noreferrer');
   };
 
   private scheduleBrowserAuthPoll = () => {

package/src/features/remote/components/remote-access-page.test.tsx

@@ -0,0 +1,104 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { RemoteAccessPage, useRemoteAccessStore } from "@/features/remote";
+import { setLanguage } from "@/lib/i18n";
+
+const mocks = vi.hoisted(() => ({
+  reauthorizeRemoteAccess: vi.fn(),
+  repairRemoteAccess: vi.fn(),
+  enableRemoteAccess: vi.fn(),
+  disableRemoteAccess: vi.fn(),
+  syncStatus: vi.fn(),
+  openNextClawWeb: vi.fn(),
+  statusQuery: {
+    data: undefined as unknown,
+    isLoading: false,
+  },
+}));
+
+vi.mock("@/features/remote/hooks/use-remote-access", () => ({
+  useRemoteStatus: () => mocks.statusQuery,
+}));
+
+vi.mock("@/app/components/app-manager-provider", () => ({
+  useAppManager: () => ({
+    remoteAccessManager: {
+      reauthorizeRemoteAccess: mocks.reauthorizeRemoteAccess,
+      repairRemoteAccess: mocks.repairRemoteAccess,
+      enableRemoteAccess: mocks.enableRemoteAccess,
+      disableRemoteAccess: mocks.disableRemoteAccess,
+      syncStatus: mocks.syncStatus,
+    },
+    accountManager: {
+      openNextClawWeb: mocks.openNextClawWeb,
+    },
+  }),
+}));
+
+describe("RemoteAccessPage", () => {
+  beforeEach(() => {
+    setLanguage("zh");
+    mocks.reauthorizeRemoteAccess.mockReset();
+    mocks.repairRemoteAccess.mockReset();
+    mocks.enableRemoteAccess.mockReset();
+    mocks.disableRemoteAccess.mockReset();
+    mocks.syncStatus.mockReset();
+    mocks.openNextClawWeb.mockReset();
+    useRemoteAccessStore.setState({
+      enabled: false,
+      deviceName: "",
+      platformApiBase: "",
+      draftTouched: false,
+      advancedOpen: false,
+      actionLabel: null,
+      doctor: null,
+    });
+    mocks.statusQuery = {
+      data: {
+        account: {
+          loggedIn: true,
+          email: "user@example.com",
+          apiBase: "https://ai-gateway-api.nextclaw.io/v1",
+          platformBase: "https://ai-gateway-api.nextclaw.io",
+        },
+        settings: {
+          enabled: true,
+          deviceName: "MacBook Pro",
+          platformApiBase: "https://ai-gateway-api.nextclaw.io/v1",
+        },
+        service: {
+          running: true,
+          currentProcess: false,
+        },
+        localOrigin: "http://127.0.0.1:55667",
+        configuredEnabled: true,
+        platformBase: "https://ai-gateway-api.nextclaw.io",
+        runtime: {
+          enabled: true,
+          mode: "service",
+          state: "error",
+          lastError: "Invalid or expired token.",
+          updatedAt: "2026-03-23T00:00:00.000Z",
+        },
+      },
+      isLoading: false,
+    };
+  });
+
+  it("shows a user-facing reauthorization flow instead of raw token errors", async () => {
+    const user = userEvent.setup();
+
+    render(<RemoteAccessPage />);
+
+    expect(screen.getByText("登录已过期，请重新登录 NextClaw")).toBeTruthy();
+    expect(screen.getByText("重新登录并恢复远程访问")).toBeTruthy();
+    expect(screen.queryByText("Invalid or expired token.")).toBeNull();
+
+    await user.click(
+      screen.getByRole("button", { name: "重新登录并恢复远程访问" }),
+    );
+
+    expect(mocks.reauthorizeRemoteAccess).toHaveBeenCalledTimes(1);
+    expect(mocks.repairRemoteAccess).not.toHaveBeenCalled();
+  });
+});

package/src/features/remote/components/remote-access-page.tsx

@@ -0,0 +1,250 @@
+import { PageHeader, PageLayout } from "@/components/layout/page-layout";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { NoticeCard } from "@/components/ui/notice-card";
+import { StatusDot } from "@/components/ui/status-dot";
+import { useAppManager } from "@/app/components/app-manager-provider";
+import {
+  buildRemoteAccessFeedbackView,
+  resolveRemoteWebBase,
+  useRemoteAccessStore,
+} from "@/features/remote";
+import { useRemoteStatus } from "@/features/remote/hooks/use-remote-access";
+import { formatDateTime, t } from "@/lib/i18n";
+import { Laptop, RefreshCcw, SquareArrowOutUpRight } from "lucide-react";
+import { useEffect, useMemo } from "react";
+
+function KeyValueRow(props: {
+  label: string;
+  value?: string | number | null;
+  muted?: boolean;
+}) {
+  const { label, muted, value: rawValue } = props;
+  const value =
+    rawValue === undefined || rawValue === null || rawValue === ""
+      ? "-"
+      : String(rawValue);
+  return (
+    <div className="flex items-start justify-between gap-4 py-2 text-sm">
+      <span className="text-gray-500">{label}</span>
+      <span
+        className={
+          muted ? "text-right text-gray-500" : "text-right text-gray-900"
+        }
+      >
+        {value}
+      </span>
+    </div>
+  );
+}
+
+export function RemoteAccessPage() {
+  const manager = useAppManager();
+  const remoteStatus = useRemoteStatus();
+  const status = remoteStatus.data;
+  const actionLabel = useRemoteAccessStore((state) => state.actionLabel);
+  const feedbackView = useMemo(
+    () => buildRemoteAccessFeedbackView(status),
+    [status],
+  );
+  const busy = Boolean(actionLabel);
+  const deviceName =
+    status?.runtime?.deviceName?.trim() ||
+    status?.settings.deviceName?.trim() ||
+    t("remoteDeviceNameAuto");
+  const canOpenDeviceList = Boolean(
+    status?.account.loggedIn && resolveRemoteWebBase(status),
+  );
+  const { hero: heroView, issueHint } = feedbackView;
+
+  useEffect(() => {
+    manager.remoteAccessManager.syncStatus(status);
+  }, [manager, 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.2fr_0.8fr]">
+        <Card>
+          <CardHeader className="space-y-4">
+            <div className="flex flex-wrap items-center gap-3">
+              <CardTitle>{heroView.title}</CardTitle>
+              <StatusDot
+                status={heroView.badgeStatus}
+                label={heroView.badgeLabel}
+              />
+            </div>
+            <CardDescription>{heroView.description}</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-5">
+            <NoticeCard tone="neutral">
+              <KeyValueRow
+                label={t("remoteSignedInAccount")}
+                value={status?.account.email}
+              />
+              <KeyValueRow label={t("remoteDeviceName")} value={deviceName} />
+              <KeyValueRow
+                label={t("remoteConnectionStatus")}
+                value={heroView.badgeLabel}
+              />
+              <KeyValueRow
+                label={t("remoteLastConnectedAt")}
+                value={
+                  status?.runtime?.lastConnectedAt
+                    ? formatDateTime(status.runtime.lastConnectedAt)
+                    : "-"
+                }
+                muted
+              />
+            </NoticeCard>
+
+            <div className="flex flex-wrap gap-3">
+              {feedbackView.primaryAction ? (
+                <Button
+                  onClick={() => {
+                    if (feedbackView.primaryAction?.kind === "reauthorize") {
+                      void manager.remoteAccessManager.reauthorizeRemoteAccess(
+                        status,
+                      );
+                      return;
+                    }
+                    if (feedbackView.primaryAction?.kind === "repair") {
+                      void manager.remoteAccessManager.repairRemoteAccess(
+                        status,
+                      );
+                      return;
+                    }
+                    void manager.remoteAccessManager.enableRemoteAccess(
+                      status,
+                    );
+                  }}
+                  disabled={busy}
+                >
+                  {feedbackView.primaryAction.showRefreshIcon ? (
+                    <RefreshCcw className="mr-2 h-4 w-4" />
+                  ) : null}
+                  {actionLabel || feedbackView.primaryAction.label}
+                </Button>
+              ) : null}
+
+              <Button
+                variant="outline"
+                onClick={() => void manager.accountManager.openNextClawWeb()}
+                disabled={busy || !canOpenDeviceList}
+              >
+                <SquareArrowOutUpRight className="mr-2 h-4 w-4" />
+                {t("remoteOpenDeviceList")}
+              </Button>
+
+              {status?.settings.enabled ? (
+                <Button
+                  variant="outline"
+                  onClick={() =>
+                    void manager.remoteAccessManager.disableRemoteAccess(
+                      status,
+                    )
+                  }
+                  disabled={busy}
+                >
+                  {t("remoteDisable")}
+                </Button>
+              ) : null}
+            </div>
+
+            {feedbackView.shouldShowIssueHint && issueHint ? (
+              <NoticeCard
+                tone="warning"
+                title={issueHint.title}
+                description={issueHint.body}
+              />
+            ) : null}
+
+            <p className="text-xs text-gray-500">{t("remoteOpenWebHint")}</p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Laptop className="h-4 w-4 text-primary" />
+              {t("remoteDeviceSectionTitle")}
+            </CardTitle>
+            <CardDescription>
+              {t("remoteDeviceSectionDescription")}
+            </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={status?.settings.enabled ? "active" : "inactive"}
+                label={
+                  status?.settings.enabled
+                    ? t("remoteEnabled")
+                    : t("remoteStateDisabled")
+                }
+              />
+              <StatusDot
+                status={status?.service.running ? "active" : "inactive"}
+                label={
+                  status?.service.running
+                    ? t("remoteServiceRunning")
+                    : t("remoteServiceStopped")
+                }
+              />
+            </div>
+
+            <NoticeCard tone="neutral">
+              <KeyValueRow label={t("remoteDeviceName")} value={deviceName} />
+              <KeyValueRow
+                label={t("remoteConnectionStatus")}
+                value={heroView.badgeLabel}
+              />
+              <KeyValueRow
+                label={t("remoteLastConnectedAt")}
+                value={
+                  status?.runtime?.lastConnectedAt
+                    ? formatDateTime(status.runtime.lastConnectedAt)
+                    : "-"
+                }
+                muted
+              />
+            </NoticeCard>
+
+            <NoticeCard
+              tone="neutral"
+              borderStyle="dashed"
+              description={
+                status?.account.loggedIn
+                  ? t("remoteOpenWebHint")
+                  : t("remoteStatusNeedsSignInDescription")
+              }
+              className="text-sm"
+            />
+          </CardContent>
+        </Card>
+      </div>
+    </PageLayout>
+  );
+}

package/src/{hooks/useRemoteAccess.ts → features/remote/hooks/use-remote-access.ts}

@@ -9,8 +9,8 @@ import {
   startRemoteBrowserAuth,
   updateRemoteSettings
 } from '@/api/remote';
+import { REMOTE_STATUS_QUERY_KEY } from '@/features/remote';
 import { t } from '@/lib/i18n';
-import { REMOTE_STATUS_QUERY_KEY } from '@/remote/remote-access.query';
 import { toast } from 'sonner';
 
 export function useRemoteStatus() {

package/src/features/remote/index.ts

@@ -0,0 +1,27 @@
+export { RemoteAccessPage } from './components/remote-access-page';
+export {
+  useRemoteBrowserAuthPoll,
+  useRemoteBrowserAuthStart,
+  useRemoteDoctor,
+  useRemoteLogin,
+  useRemoteLogout,
+  useRemoteServiceControl,
+  useRemoteSettings,
+  useRemoteStatus,
+} from './hooks/use-remote-access';
+export { RemoteAccessManager } from './managers/remote-access.manager';
+export {
+  buildRemoteAccessFeedbackView,
+  requiresRemoteReauthorization,
+  type RemoteAccessFeedbackView,
+} from './services/remote-access-feedback.service';
+export {
+  REMOTE_STATUS_QUERY_KEY,
+  ensureRemoteStatus,
+  getRemoteStatusSnapshot,
+  refreshRemoteStatus,
+  resolveRemotePlatformApiBase,
+  resolveRemotePlatformBase,
+  resolveRemoteWebBase,
+} from './services/remote-access-query.service';
+export { useRemoteAccessStore } from './stores/remote-access.store';