feat: add draft profile banner and improve profile 404 debugging

Show an info banner on the edit profile page when a profile is in draft
mode so users know their profile isn't yet visible on the public directory.
Add diagnostic logging to both the backend (ownerUid, requestingUid in
denied logs) and frontend (console.error on fetch failures) to help debug
intermittent 404s for draft profiles. Introduce loadProfile() gating so
the profile resource only fetches when explicitly requested by a component.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: markgoho

bun.lock

@@ -66,6 +66,9 @@ export async function readProfileBySlugLogic({
         logger.info("Draft profile access denied", {
           slug,
           hasAuth: Boolean(userToken),
+          requestingUid: userToken?.uid,
+          profileOwnerUid: profileData.ownerUid,
+          isAdmin: userToken?.["admin"] === true,
         });
         set.status = 404;
         return { error: "Profile not found" };

functions/package-lock.json

@@ -280,6 +280,7 @@ async function setup({ profileData, uploadError, deleteError }: SetupOptions = {
   const hasCustomImage = profileData?.image !== undefined;
 
   const mockProfileService = {
+    loadProfile: vi.fn(),
     profileResource: {
       isLoading: signal(false),
       hasValue: signal(profileData !== undefined),

functions/src/profiles-api/routes/read-profile-by-slug.ts

@@ -23,6 +23,8 @@ export class EditProfileImage {
   protected readonly successMessage = signal<string | undefined>(undefined);
 
   constructor() {
+    this.profileService.loadProfile();
+
     // Cleanup preview URL when it changes or component is destroyed
     effect((onCleanup) => {
       const url = this.previewUrl();

members/src/app/edit-profile-image/edit-profile-image.spec.ts

@@ -18,6 +18,12 @@ <h2>Profile Setup Required</h2>
     <p>Once your profile is created, you'll be able to edit it here.</p>
   </div>
 } @else if (profile()) {
+  @if (profile()?.draft === true && !isMembershipInactive()) {
+    <app-alert-banner variant="info">
+      <strong>Profile in Draft Mode</strong> — Your profile is not yet visible on the public doula
+      directory. An administrator will review and publish your profile.
+    </app-alert-banner>
+  }
   @if (isMembershipInactive()) {
     <app-alert-banner variant="warning">
       <h2>Membership Inactive</h2>

members/src/app/edit-profile-image/edit-profile-image.ts

@@ -385,6 +385,7 @@ async function setup({
 
   const mockProfileService = {
     profile: signal(profileSignalValue),
+    loadProfile: vi.fn(),
     profileImageUrl: signal(
       hasProfile && userHasSlug
         ? 'https://ik.imagekit.io/doulacoop/tr:w-300,h-300,fo-face,z-0.5,di-default-profile.png/doulas/jane-doe/jane-doe-profile'

members/src/app/edit-profile/edit-profile.html

@@ -43,6 +43,8 @@ export class EditProfile {
   });
 
   constructor() {
+    this.profileService.loadProfile();
+
     effect(() => {
       const profile = this.profile();
       if (profile && !this.profileForm.dirty) {

members/src/app/edit-profile/edit-profile.spec.ts

@@ -34,6 +34,13 @@ export class ProfileService {
 
   private readonly imageCacheBust = signal(Date.now());
 
+  /**
+   * Whether profile loading has been requested.
+   * Pages that need the profile (edit-profile, edit-profile-image) call loadProfile().
+   * Pages that don't (create-profile) skip calling it, avoiding a spurious 404.
+   */
+  private readonly loadRequested = signal(false);
+
   constructor() {
     // TODO(2026-06-01): Remove this localStorage cleanup once all users have loaded the app at least once.
     // Clean up any leftover optimistic state from the old implementation
@@ -57,9 +64,19 @@ export class ProfileService {
     });
   }
 
-  // Resource automatically loads profile based on membership status
+  /**
+   * Request profile loading. Call this from components that need the profile data.
+   * The resource won't fetch until this is called, preventing spurious 404s
+   * on pages like /profile/create where the profile doesn't exist yet.
+   */
+  loadProfile(): void {
+    this.loadRequested.set(true);
+  }
+
+  // Resource loads profile only after loadProfile() is called
   readonly profileResource = resource({
     params: () => {
+      if (!this.loadRequested()) return undefined;
       const user = this.membershipService.userDocument();
       // Only load if user has active membership and a slug
       return user?.membershipActive && user?.slug ? { slug: user.slug } : undefined;
@@ -215,7 +232,27 @@ export class ProfileService {
   }
 
   private async fetchProfileFromServer(slug: string): Promise<ProfileData> {
-    return firstValueFrom(this.http.get<ProfileData>(`/api/profiles/${slug}`));
+    try {
+      return await firstValueFrom(this.http.get<ProfileData>(`/api/profiles/${slug}`));
+    } catch (error: unknown) {
+      if (error instanceof HttpErrorResponse && error.status === 404) {
+        console.error('Profile not found (404):', {
+          slug,
+          status: error.status,
+          errorBody: error.error,
+          hint: 'If the profile exists but is draft, this may be a draft access control issue. Check that the auth token is being sent and that ownerUid matches.',
+        });
+      } else {
+        console.error('Profile fetch failed:', {
+          slug,
+          error:
+            error instanceof HttpErrorResponse
+              ? { status: error.status, body: error.error }
+              : String(error),
+        });
+      }
+      throw error;
+    }
   }
 
   getTagUrl(tag: string): string {

members/src/app/edit-profile/edit-profile.ts

@@ -25,7 +25,7 @@
   },
   "devDependencies": {
     "@imagekit/nodejs": "^7.3.0",
-    "@types/bun": "^1.3.9",
+    "@types/bun": "^1.3.10",
     "eslint": "^9.39.3",
     "eslint-plugin-unicorn": "^63.0.0",
     "firebase-admin": "^13.4.0",