diff --git a/packages/webui/src/client/components/AccountLoginDialog.tsx b/packages/webui/src/client/components/AccountLoginDialog.tsx
new file mode 100644
index 00000000..4efaae81
--- /dev/null
+++ b/packages/webui/src/client/components/AccountLoginDialog.tsx
@@ -0,0 +1,312 @@
+// AccountLoginDialog — the browser's device-authorization login.
+//
+// The WebUI previously had no login at all: it served whatever credential the
+// terminal client had written, and 退出登录 did not remove it, so neither
+// signing in nor switching accounts was possible without leaving the
+// browser. This dialog is the missing surface for both rows of the roadmap's
+// 登录与账号 group:
+//
+// * 登录方式 — the device-authorization flow the terminal client uses,
+// rendered for the browser: a user code, the page to enter it on, and a
+// poll until the server observes the credential.
+// * 登出·账号切换 — the same dialog is the switch entry: already signed in,
+// it offers 切换账号, which signs the current account out for real and
+// starts a fresh device flow in one place.
+//
+// Split in two so the node suite can cover every phase without a DOM: the
+// `AccountLoginPanel` is a pure view over an injected phase (the suite's
+// `renderToStaticMarkup` convention), and the dialog owns the effects —
+// start on open, poll while pending, stop on close.
+
+import { useEffect, useRef, useState, type ReactElement } from "react";
+import { createPortal } from "react-dom";
+import type { WebuiAccountLoginView } from "../../server/port.js";
+
+/** Everything the panel can show, derived (not fetched). */
+export type WebuiAccountLoginPhase =
+ | { readonly kind: "loading" }
+ | {
+ readonly kind: "pending";
+ readonly userCode?: string;
+ readonly verificationUri?: string;
+ readonly verificationUriComplete?: string;
+ }
+ | { readonly kind: "authenticated" }
+ | { readonly kind: "error"; readonly error: string };
+
+/**
+ * Derive the view phase from a server answer. `idle` with no attempt means
+ * the dialog just started (or the host has no session); a `pending` answer
+ * without a prompt yet is the network being slower than the first reply —
+ * the panel says 等待设备码 rather than guessing a code.
+ */
+export function deriveWebuiAccountLoginPhase(
+ view: WebuiAccountLoginView | undefined,
+): WebuiAccountLoginPhase {
+ if (!view) return { kind: "loading" };
+ switch (view.state) {
+ case "authenticated":
+ return { kind: "authenticated" };
+ case "error":
+ return { kind: "error", error: view.error };
+ case "pending":
+ return {
+ kind: "pending",
+ userCode: view.prompt?.userCode,
+ verificationUri: view.prompt?.verificationUri,
+ verificationUriComplete: view.prompt?.verificationUriComplete,
+ };
+ default:
+ return { kind: "loading" };
+ }
+}
+
+export function AccountLoginPanel({
+ phase,
+ onRetry,
+ onCancel,
+ onSwitch,
+ onClose,
+}: {
+ readonly phase: WebuiAccountLoginPhase;
+ /** Error → start a fresh device flow. */
+ readonly onRetry: () => void;
+ /** Pending → cancel the in-flight attempt. */
+ readonly onCancel: () => void;
+ /** Authenticated → sign out, then start a fresh device flow. */
+ readonly onSwitch: () => void;
+ readonly onClose: () => void;
+}): ReactElement {
+ return (
+
登录后查看用量
+ {/* The button's mousedown is default-prevented: focus would bubble
+ * (focusin) to the usage anchor's onFocus → loadUsage, whose loading
+ * state swaps this block for the skeleton — the pressed node is
+ * replaced mid-click and the browser never dispatches the click.
+ * Keeping the focus where it was makes the first click land like
+ * every later one. */}
+ {onLogin ? (
+
+ ) : null}
);
}
@@ -660,9 +684,12 @@ function UsageReady({ result }: { readonly result?: WebuiUsageQuotaResult }): Re
export function UsagePanel({
state,
onRetry,
+ onLogin,
}: {
readonly state: UsageState;
readonly onRetry: () => void;
+ /** Opens the account login dialog from the signed-out usage block. */
+ readonly onLogin?: () => void;
}): ReactElement {
return (
@@ -680,7 +707,7 @@ export function UsagePanel({
) : null}
- {state.status === "ready" ? : null}
+ {state.status === "ready" ? : null}
);
}
@@ -697,13 +724,21 @@ export function UserMenu({
getSigninPanel,
claimSignin,
}: UserMenuProps): ReactElement {
- const { getUsageQuota, getAccountStatus } = useMemo(() => ({
+ // Bound once per transport, not per render: the login dialog's effects
+ // key on these callbacks, and a fresh binding every render would restart
+ // its poll (and its begin) on every unrelated re-render.
+ const { getUsageQuota, getAccountStatus, beginAccountLogin, getAccountLoginStatus, cancelAccountLogin, signOut } = useMemo(() => ({
getUsageQuota: transport?.getUsageQuota?.bind(transport),
getAccountStatus: transport?.getAccountStatus?.bind(transport),
+ beginAccountLogin: transport?.beginAccountLogin?.bind(transport),
+ getAccountLoginStatus: transport?.getAccountLoginStatus?.bind(transport),
+ cancelAccountLogin: transport?.cancelAccountLogin?.bind(transport),
+ signOut: transport?.signOut?.bind(transport),
}), [transport]);
const anchorRef = useRef(null);
const [open, setOpen] = useState(false);
const [settingsOpen, setSettingsOpen] = useState(false);
+ const [loginOpen, setLoginOpen] = useState(false);
const [usageOpen, setUsageOpen] = useState(false);
const [usage, setUsage] = useState({ status: "idle" });
const [signinOpen, setSigninOpen] = useState(false);
@@ -840,6 +875,7 @@ export function UserMenu({
UID : {uid ?? "—"}
+
loadSignin()} onFocus={() => loadSignin()} onClick={(event) => { event.stopPropagation(); if (!signinOpen) loadSignin(); }}>
@@ -863,11 +899,22 @@ export function UserMenu({