fix: restore access token creation flow

Fixes #5563

web/src/components/CreateAccessTokenDialog.tsx

-import React, { useState } from "react";
+import copy from "copy-to-clipboard";
+import React, { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Textarea } from "@/components/ui/textarea";
 import { userServiceClient } from "@/connect";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import useLoading from "@/hooks/useLoading";
@@ -30,6 +32,7 @@ function CreateAccessTokenDialog({ open, onOpenChange, onSuccess }: Props) {
     description: "",
     expiration: 30, // Default: 30 days
   });
+  const [createdToken, setCreatedToken] = useState<string | null>(null);
   const requestState = useLoading(false);
 
   // Expiration options in days (0 = never expires)
@@ -83,7 +86,11 @@ function CreateAccessTokenDialog({ open, onOpenChange, onSuccess }: Props) {
 
       requestState.setFinish();
       onSuccess(response);
+      if (response.token) {
+        setCreatedToken(response.token);
+      } else {
         onOpenChange(false);
+      }
     } catch (error: unknown) {
       handleError(error, toast.error, {
         context: "Create access token",
@@ -92,12 +99,35 @@ function CreateAccessTokenDialog({ open, onOpenChange, onSuccess }: Props) {
     }
   };
 
+  const handleCopyToken = () => {
+    if (!createdToken) return;
+    copy(createdToken);
+    toast.success(t("message.copied"));
+  };
+
+  useEffect(() => {
+    if (!open) return;
+    setState({
+      description: "",
+      expiration: 30,
+    });
+    setCreatedToken(null);
+  }, [open]);
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="max-w-md">
         <DialogHeader>
           <DialogTitle>{t("setting.access-token-section.create-dialog.create-access-token")}</DialogTitle>
         </DialogHeader>
+        {createdToken ? (
+          <div className="flex flex-col gap-4">
+            <div className="grid gap-2">
+              <Label>{t("setting.access-token-section.token")}</Label>
+              <Textarea value={createdToken} readOnly rows={3} className="font-mono text-xs" />
+            </div>
+          </div>
+        ) : (
           <div className="flex flex-col gap-4">
             <div className="grid gap-2">
               <Label htmlFor="description">
@@ -125,13 +155,25 @@ function CreateAccessTokenDialog({ open, onOpenChange, onSuccess }: Props) {
               </RadioGroup>
             </div>
           </div>
+        )}
         <DialogFooter>
+          {createdToken ? (
+            <>
+              <Button variant="ghost" onClick={handleCopyToken}>
+                {t("common.copy")}
+              </Button>
+              <Button onClick={() => onOpenChange(false)}>{t("common.close")}</Button>
+            </>
+          ) : (
+            <>
               <Button variant="ghost" disabled={requestState.isLoading} onClick={() => onOpenChange(false)}>
                 {t("common.cancel")}
               </Button>
               <Button disabled={requestState.isLoading} onClick={handleSaveBtnClick}>
                 {t("common.create")}
               </Button>
+            </>
+          )}
         </DialogFooter>
       </DialogContent>
     </Dialog>

web/src/components/Settings/AccessTokenSection.tsx

@@ -8,6 +8,7 @@ import { Button } from "@/components/ui/button";
 import { userServiceClient } from "@/connect";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import { useDialog } from "@/hooks/useDialog";
+import { handleError } from "@/lib/error";
 import { CreatePersonalAccessTokenResponse, PersonalAccessToken } from "@/types/proto/api/v1/user_service_pb";
 import { useTranslate } from "@/utils/i18n";
 import CreateAccessTokenDialog from "../CreateAccessTokenDialog";
@@ -30,10 +31,23 @@ const AccessTokenSection = () => {
   const [deleteTarget, setDeleteTarget] = useState<PersonalAccessToken | undefined>(undefined);
 
   useEffect(() => {
-    listAccessTokens(currentUser?.name ?? "").then((tokens) => {
+    if (!currentUser?.name) return;
+    let canceled = false;
+    listAccessTokens(currentUser.name)
+      .then((tokens) => {
+        if (!canceled) {
           setPersonalAccessTokens(tokens);
+        }
+      })
+      .catch((error: unknown) => {
+        if (!canceled) {
+          handleError(error, toast.error, { context: "List access tokens" });
+        }
       });
-  }, []);
+    return () => {
+      canceled = true;
+    };
+  }, [currentUser?.name]);
 
   const handleCreateAccessTokenDialogConfirm = async (response: CreatePersonalAccessTokenResponse) => {
     const tokens = await listAccessTokens(currentUser?.name ?? "");