Reveal first/last characters of a newly created Personal Access Token

The token shown after creating a Personal Access Token was fully masked,
so users had no way to confirm they had copied the right value. The field
now reveals the first and last few characters in cleartext (the middle
stays masked), matching the partial display already used in the tokens
list.

Adds general `secureRevealStart` / `secureRevealEnd` props to ClipboardField
(default 0/0, so all other usages remain fully masked) and enables 4/4 in
the token creation dialog.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Ws8U3Nx9CBQKWPPg1u2Yy4

Author: claude

.server-changes/pat-token-reveal-last-chars.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+When you create a Personal Access Token, the generated token now shows its first and last few characters instead of being fully hidden, so you can confirm you copied the right value.

apps/webapp/app/components/primitives/ClipboardField.tsx

@@ -60,9 +60,43 @@ const variants = {
   },
 };
 
+const SECURE_MASK = "••••••••••••••••";
+
+/**
+ * Builds the masked display string, optionally revealing the first/last few
+ * characters in cleartext so users can confirm a copied value. A custom mask
+ * string (when `secure` is a string) is always shown as-is.
+ */
+function maskValue(
+  value: string,
+  secure: boolean | string,
+  revealStart: number,
+  revealEnd: number
+) {
+  if (typeof secure === "string") {
+    return secure;
+  }
+
+  const start = Math.max(0, revealStart);
+  const end = Math.max(0, revealEnd);
+
+  // Nothing to reveal, or revealing would leak the whole value: fully mask.
+  if ((start === 0 && end === 0) || start + end >= value.length) {
+    return SECURE_MASK;
+  }
+
+  const revealedStart = start > 0 ? value.slice(0, start) : "";
+  const revealedEnd = end > 0 ? value.slice(-end) : "";
+  return `${revealedStart}${SECURE_MASK}${revealedEnd}`;
+}
+
 type ClipboardFieldProps = {
   value: string;
   secure?: boolean | string;
+  /** When masked, reveal this many of the first characters in cleartext. */
+  secureRevealStart?: number;
+  /** When masked, reveal this many of the last characters in cleartext. */
+  secureRevealEnd?: number;
   variant: keyof typeof variants;
   className?: string;
   icon?: React.ReactNode;
@@ -73,6 +107,8 @@ type ClipboardFieldProps = {
 export function ClipboardField({
   value,
   secure = false,
+  secureRevealStart = 0,
+  secureRevealEnd = 0,
   variant,
   className,
   icon,
@@ -87,6 +123,8 @@ export function ClipboardField({
     setIsSecure(secure !== undefined && secure);
   }, [secure]);
 
+  const maskedValue = maskValue(value, secure, secureRevealStart, secureRevealEnd);
+
   return (
     <span className={cn(container, fullWidth ? "w-full" : "max-w-fit", className)}>
       {icon && (
@@ -100,7 +138,7 @@ export function ClipboardField({
       <input
         type="text"
         ref={inputIcon}
-        value={isSecure ? (typeof secure === "string" ? secure : "••••••••••••••••") : value}
+        value={isSecure ? maskedValue : value}
         readOnly={true}
         className={cn(
           "shrink grow select-all overflow-x-auto",

apps/webapp/app/routes/account.tokens/route.tsx

@@ -372,6 +372,9 @@ function CreatePersonalAccessToken({
           </Callout>
           <ClipboardField
             secure
+            // 7-char "tr_pat_" prefix + 4 token chars, matching the tokens list display
+            secureRevealStart={11}
+            secureRevealEnd={4}
             value={token.token}
             variant={"secondary/medium"}
             icon={<ShieldExclamationIcon className="size-5 text-success" />}