agent: @U0AJM7X8FBR Admin Codebase - Hide Sensitive Info Toggle

sweetmantech · Recoup Agent · claude · web-flow · commit 986f25c57839 · 2026-03-18T11:22:34.000-05:00
• actual: email (#17) * feat: add HideProvider with sensitive info toggle Adds a global Eye/EyeOff toggle button (fixed top-right) that masks all email fields across the admin dashboard when activated. - New HideProvider context + useHide hook - New maskEmail utility (e.g. "jo***@ex***.com") - HideToggle component wired into global Providers - privyLoginsColumns, sandboxesColumns, AccountReposList all respect isHidden Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix: hide toggle only when authenticated Prevents the toggle from overlapping the sign-in button on the login page. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * refactor: move hide toggle into header, simplify to icon only - HideToggle is now icon-only (no button background, no label) - Moved from fixed position in Providers to LoginButton header (next to email and sign out) - Extracted EmailCell to its own component file (SRP) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * refactor: shared root layout, fix PR review comments - AppHeader with LoginButton + HideToggle in root layout (all pages) - Removed duplicate header from HomePage - Fixed title tooltips to use masked email when hidden - Extracted AccountEmailCell from sandboxesColumns (SRP) - Extracted LastSeenCell from privyLoginsColumns (SRP) - Moved maskEmail to lib/hide/maskEmail.ts Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix: address PR review comments - HideToggle: added aria-label, aria-pressed, type=button - LoginButton: mask header email when hidden - DRY: created useDisplayEmail hook, used by EmailCell, AccountEmailCell, AccountReposList, LoginButton - LastSeenCell: use == null instead of falsy check for timestamp 0 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * refactor: move HideToggle from LoginButton to AppHeader (SRP) LoginButton should only handle login/logout. The visibility toggle is a header-level concern. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * refactor: move components to subdirectories, extract AccountRepoLink - AppHeader → components/Header/AppHeader.tsx - HideToggle → components/Header/HideToggle.tsx - ApiDocsLink → components/ApiDocs/ApiDocsLink.tsx - Extracted AccountRepoLink from AccountReposList (SRP) - Updated all imports Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * feat: add blink animation to hide toggle On click: eye closes (scaleY 0), icon swaps, eye opens (scaleY 1). 150ms transition for a natural blink effect. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix: center HomeContent vertically on the page Made <main> a flex column container so child flex-1 items-center can properly fill the remaining height. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix: smooth blink open animation Keep scaleY(0) when icon swaps, then animate to scaleY(1) on the next frame so the opening is a smooth transition instead of a flash. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Recoup Agent <agent@recoupable.com> Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import Providers from "@/providers/Providers";
+import AppHeader from "@/components/Header/AppHeader";
 import "./globals.css";
 
 const geistSans = Geist({
@@ -32,7 +33,14 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        <Providers>{children}</Providers>
+        <Providers>
+          <div className="flex min-h-screen flex-col">
+            <AppHeader />
+            <main className="flex flex-1 flex-col">
+              {children}
+            </main>
+          </div>
+        </Providers>
       </body>
     </html>
   );
diff --git a/components/ApiDocs/ApiDocsLink.tsx b/components/ApiDocs/ApiDocsLink.tsx
diff --git a/components/Header/AppHeader.tsx b/components/Header/AppHeader.tsx
@@ -0,0 +1,14 @@
+import LoginButton from "@/components/Login/LoginButton";
+import { HideToggle } from "@/components/Header/HideToggle";
+
+export default function AppHeader() {
+  return (
+    <header className="flex items-center justify-between border-b px-6 py-4">
+      <h1 className="text-lg font-semibold">Recoup Admin</h1>
+      <div className="flex items-center gap-3">
+        <LoginButton />
+        <HideToggle />
+      </div>
+    </header>
+  );
+}
diff --git a/components/Header/HideToggle.tsx b/components/Header/HideToggle.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+import { useState, useCallback, useRef } from "react";
+import { Eye, EyeOff } from "lucide-react";
+import { useHide } from "@/providers/HideProvider";
+
+const BLINK_MS = 150;
+
+export function HideToggle() {
+  const { isHidden, toggle } = useHide();
+  const [phase, setPhase] = useState<"idle" | "closing" | "opening">("idle");
+  const iconRef = useRef<SVGSVGElement>(null);
+
+  const handleClick = useCallback(() => {
+    if (phase !== "idle") return;
+
+    // Phase 1: close the eye
+    setPhase("closing");
+
+    setTimeout(() => {
+      // Phase 2: swap icon while still closed, then open
+      toggle();
+      setPhase("opening");
+
+      // Wait for next frame so the browser registers scaleY(0) before animating to scaleY(1)
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          setPhase("idle");
+        });
+      });
+    }, BLINK_MS);
+  }, [toggle, phase]);
+
+  const Icon = isHidden ? EyeOff : Eye;
+
+  const scaleY = phase === "closing" || phase === "opening" ? 0 : 1;
+
+  return (
+    <button
+      type="button"
+      onClick={handleClick}
+      aria-label={isHidden ? "Show sensitive info" : "Hide sensitive info"}
+      aria-pressed={isHidden}
+      title={isHidden ? "Show sensitive info" : "Hide sensitive info"}
+      className="text-muted-foreground hover:text-foreground transition-colors"
+    >
+      <Icon
+        ref={iconRef}
+        className="h-4 w-4"
+        style={{
+          transform: `scaleY(${scaleY})`,
+          transition: `transform ${BLINK_MS}ms ease-in-out`,
+        }}
+      />
+    </button>
+  );
+}
diff --git a/components/Home/AdminDashboard.tsx b/components/Home/AdminDashboard.tsx
@@ -1,5 +1,5 @@
 import NavButton from "@/components/Home/NavButton";
-import ApiDocsLink from "@/components/ApiDocsLink";
+import ApiDocsLink from "@/components/ApiDocs/ApiDocsLink";
 
 export default function AdminDashboard() {
   return (
diff --git a/components/Home/HomePage.tsx b/components/Home/HomePage.tsx
@@ -1,16 +1,9 @@
-import LoginButton from "@/components/Login/LoginButton";
 import HomeContent from "@/components/Home/HomeContent";
 
 export default function HomePage() {
   return (
-    <div className="flex min-h-screen flex-col">
-      <header className="flex items-center justify-between border-b px-6 py-4">
-        <h1 className="text-lg font-semibold">Recoup Admin</h1>
-        <LoginButton />
-      </header>
-      <main className="flex flex-1 items-center justify-center">
-        <HomeContent />
-      </main>
+    <div className="flex flex-1 items-center justify-center">
+      <HomeContent />
     </div>
   );
 }
diff --git a/components/Login/LoginButton.tsx b/components/Login/LoginButton.tsx
@@ -2,10 +2,12 @@
 
 import { usePrivy } from "@privy-io/react-auth";
 import { Button } from "@/components/ui/button";
+import { useDisplayEmail } from "@/lib/hide/useDisplayEmail";
 import LoginButtonSkeleton from "./LoginButtonSkeleton";
 
 export default function LoginButton() {
   const { login, logout, authenticated, ready, user } = usePrivy();
+  const displayEmail = useDisplayEmail(user?.email?.address ?? null);
 
   if (!ready) {
     return <LoginButtonSkeleton />;
@@ -15,7 +17,7 @@ export default function LoginButton() {
     return (
       <div className="flex items-center gap-3">
         <span className="text-sm text-muted-foreground">
-          {user?.email?.address ?? "Signed in"}
+          {displayEmail ?? "Signed in"}
         </span>
         <Button variant="ghost" onClick={logout}>
           Sign Out
diff --git a/components/PrivyLogins/EmailCell.tsx b/components/PrivyLogins/EmailCell.tsx
@@ -0,0 +1,13 @@
+"use client";
+
+import { useDisplayEmail } from "@/lib/hide/useDisplayEmail";
+
+interface EmailCellProps {
+  getValue: () => string | null;
+}
+
+export default function EmailCell({ getValue }: EmailCellProps) {
+  const displayEmail = useDisplayEmail(getValue());
+  if (!displayEmail) return <span className="text-gray-400 italic">No email</span>;
+  return <span>{displayEmail}</span>;
+}
diff --git a/components/PrivyLogins/LastSeenCell.tsx b/components/PrivyLogins/LastSeenCell.tsx
@@ -0,0 +1,9 @@
+interface LastSeenCellProps {
+  getValue: () => number | null;
+}
+
+export default function LastSeenCell({ getValue }: LastSeenCellProps) {
+  const ts = getValue();
+  if (ts == null) return <span className="text-gray-400 italic">Never</span>;
+  return <span>{new Date(ts * 1000).toLocaleString()}</span>;
+}
diff --git a/components/PrivyLogins/PrivyLoginsPage.tsx b/components/PrivyLogins/PrivyLoginsPage.tsx
@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import PageBreadcrumb from "@/components/Sandboxes/PageBreadcrumb";
-import ApiDocsLink from "@/components/ApiDocsLink";
+import ApiDocsLink from "@/components/ApiDocs/ApiDocsLink";
 import { usePrivyLogins } from "@/hooks/usePrivyLogins";
 import PrivyLoginsTable from "@/components/PrivyLogins/PrivyLoginsTable";
 import PrivyPeriodSelector from "@/components/PrivyLogins/PrivyPeriodSelector";
diff --git a/components/PrivyLogins/privyLoginsColumns.tsx b/components/PrivyLogins/privyLoginsColumns.tsx
@@ -2,17 +2,18 @@ import { type ColumnDef } from "@tanstack/react-table";
 import { SortableHeader } from "@/components/SandboxOrgs/SortableHeader";
 import { getEmail } from "@/lib/privy/getEmail";
 import { getLastSeen } from "@/lib/privy/getLastSeen";
+import EmailCell from "@/components/PrivyLogins/EmailCell";
+import LastSeenCell from "@/components/PrivyLogins/LastSeenCell";
 import type { PrivyUser } from "@/types/privy";
 
 export const privyLoginsColumns: ColumnDef<PrivyUser>[] = [
   {
     id: "email",
     accessorFn: (row) => getEmail(row),
     header: "Email",
-    cell: ({ getValue }) => {
-      const email = getValue<string | null>();
-      return email ?? <span className="text-gray-400 italic">No email</span>;
-    },
+    cell: ({ getValue }) => (
+      <EmailCell getValue={() => getValue<string | null>()} />
+    ),
   },
   {
     id: "created_at",
@@ -25,10 +26,9 @@ export const privyLoginsColumns: ColumnDef<PrivyUser>[] = [
     id: "last_seen",
     accessorFn: (row) => getLastSeen(row),
     header: ({ column }) => <SortableHeader column={column} label="Last Seen" />,
-    cell: ({ getValue }) => {
-      const ts = getValue<number | null>();
-      return ts ? new Date(ts * 1000).toLocaleString() : <span className="text-gray-400 italic">Never</span>;
-    },
+    cell: ({ getValue }) => (
+      <LastSeenCell getValue={() => getValue<number | null>()} />
+    ),
     sortingFn: "basic",
   },
 ];
diff --git a/components/SandboxOrgs/AccountRepoLink.tsx b/components/SandboxOrgs/AccountRepoLink.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import Link from "next/link";
+import { useDisplayEmail } from "@/lib/hide/useDisplayEmail";
+import type { AccountRepo } from "@/types/sandbox";
+
+export default function AccountRepoLink({ account_id, email }: AccountRepo) {
+  const displayEmail = useDisplayEmail(email ?? null);
+  const displayLabel = displayEmail ?? account_id;
+  return (
+    <li>
+      <Link
+        href={`/accounts/${account_id}`}
+        className="text-[#345A5D] hover:underline font-medium truncate block max-w-xs"
+        title={`View task runs for ${displayLabel}`}
+      >
+        {displayLabel}
+      </Link>
+    </li>
+  );
+}
diff --git a/components/SandboxOrgs/AccountReposList.tsx b/components/SandboxOrgs/AccountReposList.tsx
@@ -1,4 +1,6 @@
-import Link from "next/link";
+"use client";
+
+import AccountRepoLink from "@/components/SandboxOrgs/AccountRepoLink";
 import type { AccountRepo } from "@/types/sandbox";
 
 interface AccountReposListProps {
@@ -11,20 +13,9 @@ export function AccountReposList({ repos }: AccountReposListProps) {
   }
   return (
     <ul className="space-y-1 text-sm">
-      {repos.map(({ account_id, email }) => {
-        const displayLabel = email ?? account_id;
-        return (
-          <li key={account_id}>
-            <Link
-              href={`/accounts/${account_id}`}
-              className="text-[#345A5D] hover:underline font-medium truncate block max-w-xs"
-              title={`View task runs for ${displayLabel}`}
-            >
-              {displayLabel}
-            </Link>
-          </li>
-        );
-      })}
+      {repos.map((repo) => (
+        <AccountRepoLink key={repo.account_id} {...repo} />
+      ))}
     </ul>
   );
 }
diff --git a/components/SandboxOrgs/SandboxOrgsPage.tsx b/components/SandboxOrgs/SandboxOrgsPage.tsx
@@ -1,5 +1,5 @@
 import SandboxOrgsTableContainer from "@/components/SandboxOrgs/SandboxOrgsTableContainer";
-import ApiDocsLink from "@/components/ApiDocsLink";
+import ApiDocsLink from "@/components/ApiDocs/ApiDocsLink";
 import PageBreadcrumb from "@/components/Sandboxes/PageBreadcrumb";
 
 export default function SandboxOrgsPage() {
diff --git a/components/Sandboxes/AccountEmailCell.tsx b/components/Sandboxes/AccountEmailCell.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import Link from "next/link";
+import { useDisplayEmail } from "@/lib/hide/useDisplayEmail";
+
+interface AccountEmailCellProps {
+  email: string | null;
+  accountId: string;
+}
+
+export default function AccountEmailCell({ email, accountId }: AccountEmailCellProps) {
+  const displayEmail = useDisplayEmail(email);
+  return (
+    <Link
+      href={`/accounts/${accountId}`}
+      className="text-[#345A5D] hover:underline font-medium"
+      title={`View task runs for ${displayEmail ?? accountId}`}
+    >
+      {displayEmail ?? (
+        <span className="font-mono text-xs text-gray-500">{accountId}</span>
+      )}
+    </Link>
+  );
+}
diff --git a/components/Sandboxes/SandboxesPage.tsx b/components/Sandboxes/SandboxesPage.tsx
@@ -1,5 +1,5 @@
 import SandboxesTableContainer from "@/components/Sandboxes/SandboxesTableContainer";
-import ApiDocsLink from "@/components/ApiDocsLink";
+import ApiDocsLink from "@/components/ApiDocs/ApiDocsLink";
 import PageBreadcrumb from "@/components/Sandboxes/PageBreadcrumb";
 
 export default function SandboxesPage() {
diff --git a/components/Sandboxes/sandboxesColumns.tsx b/components/Sandboxes/sandboxesColumns.tsx
@@ -1,26 +1,19 @@
 import { type ColumnDef } from "@tanstack/react-table";
 import { ArrowUpDown, ArrowUp, ArrowDown } from "lucide-react";
-import Link from "next/link";
 import { Button } from "@/components/ui/button";
+import AccountEmailCell from "@/components/Sandboxes/AccountEmailCell";
 import type { AccountSandboxRow } from "@/types/sandbox";
 
 export const sandboxesColumns: ColumnDef<AccountSandboxRow>[] = [
   {
     accessorKey: "account_email",
     header: "Account Email",
-    cell: ({ row }) => {
-      const email = row.getValue<string | null>("account_email");
-      const accountId = row.original.account_id;
-      return (
-        <Link
-          href={`/accounts/${accountId}`}
-          className="text-[#345A5D] hover:underline font-medium"
-          title={`View task runs for ${email ?? accountId}`}
-        >
-          {email ?? <span className="font-mono text-xs text-gray-500">{accountId}</span>}
-        </Link>
-      );
-    },
+    cell: ({ row }) => (
+      <AccountEmailCell
+        email={row.getValue<string | null>("account_email")}
+        accountId={row.original.account_id}
+      />
+    ),
   },
   {
     accessorKey: "total_sandboxes",
diff --git a/lib/hide/maskEmail.ts b/lib/hide/maskEmail.ts
@@ -0,0 +1,22 @@
+/**
+ * Masks an email address so sensitive info is not exposed.
+ * e.g. "john.doe@example.com" → "jo***@ex***.com"
+ */
+export function maskEmail(email: string): string {
+  const atIndex = email.indexOf("@");
+  if (atIndex === -1) return "***";
+
+  const local = email.slice(0, atIndex);
+  const domain = email.slice(atIndex + 1);
+
+  const maskedLocal = local.slice(0, 2).padEnd(2, "*") + "***";
+
+  const dotIndex = domain.lastIndexOf(".");
+  if (dotIndex === -1) return `${maskedLocal}@***`;
+
+  const domainName = domain.slice(0, dotIndex);
+  const tld = domain.slice(dotIndex);
+  const maskedDomain = domainName.slice(0, 2).padEnd(2, "*") + "***";
+
+  return `${maskedLocal}@${maskedDomain}${tld}`;
+}
diff --git a/lib/hide/useDisplayEmail.ts b/lib/hide/useDisplayEmail.ts
@@ -0,0 +1,13 @@
+"use client";
+
+import { useHide } from "@/providers/HideProvider";
+import { maskEmail } from "@/lib/hide/maskEmail";
+
+/**
+ * Returns the email formatted for display — masked when hide mode is active.
+ */
+export function useDisplayEmail(email: string | null): string | null {
+  const { isHidden } = useHide();
+  if (!email) return null;
+  return isHidden ? maskEmail(email) : email;
+}
diff --git a/providers/HideProvider.tsx b/providers/HideProvider.tsx
diff --git a/providers/Providers.tsx b/providers/Providers.tsx
