From 3be729327bd4cceca1e0573ad44f1350bc076cc7 Mon Sep 17 00:00:00 2001
From: Harkamal Randhawa <harkamalsr@gmail.com>
Date: Sun, 24 May 2026 08:47:48 -0600
Subject: [PATCH] Add inline pet rename, larger header text, and HaBit
 branding.

Let users edit the pet name from PetHabitat with a pencil icon, bump the name and mood header sizing, and rename user-facing Habit Pet copy to HaBit Pet.
---
 app/(app)/avatar/page.tsx                     |   2 +-
 app/auth/sign-up-success/page.tsx             |   2 +-
 app/layout.tsx                                |   2 +-
 components/avatar/avatar-page-content.tsx     |  10 +-
 components/landing/landing-pet-preview.tsx    |   4 +
 components/layout/habit-brand.tsx             |   2 +-
 .../onboarding/onboarding-customize-form.tsx  |   4 +-
 .../onboarding/onboarding-quiz-form.tsx       |   2 +-
 components/pet/pet-habitat.tsx                |  17 +-
 components/pet/pet-name-header.tsx            | 166 ++++++++++++++++++
 .../profile/profile-preferences-form.tsx      |   2 +-
 lib/daily-reminders.ts                        |   2 +-
 lib/openrouter.ts                             |   2 +-
 lib/reminder-delivery.ts                      |   2 +-
 14 files changed, 201 insertions(+), 18 deletions(-)
 create mode 100644 components/pet/pet-name-header.tsx

diff --git a/app/(app)/avatar/page.tsx b/app/(app)/avatar/page.tsx
index 57ca086..9ac08c9 100644
--- a/app/(app)/avatar/page.tsx
+++ b/app/(app)/avatar/page.tsx
@@ -6,7 +6,7 @@ import { AppShell } from "@/components/layout/app-shell";
 export default function AvatarPage() {
   return (
     <AppShell
-      title="Your Habit Pet"
+      title="Your HaBit Pet"
       description="Watch your pet roam, breathe, and react to how you care for them."
       fillViewport
       centered
diff --git a/app/auth/sign-up-success/page.tsx b/app/auth/sign-up-success/page.tsx
index 06bac40..3655b2f 100644
--- a/app/auth/sign-up-success/page.tsx
+++ b/app/auth/sign-up-success/page.tsx
@@ -22,7 +22,7 @@ export default function Page() {
             </CardHeader>
             <CardContent>
               <p className="text-sm text-muted-foreground">
-                Your account is ready. You can sign in and start using Habit Pet.
+                Your account is ready. You can sign in and start using HaBit Pet.
               </p>
             </CardContent>
           </Card>
diff --git a/app/layout.tsx b/app/layout.tsx
index 99e3326..7b7e30d 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -12,7 +12,7 @@ const defaultUrl = process.env.VERCEL_URL
 
 export const metadata: Metadata = {
   metadataBase: new URL(defaultUrl),
-  title: "Habit Pet",
+  title: "HaBit Pet",
   description: "Build habits, care for your pixel pet, and track wellness every day.",
 };
 
diff --git a/components/avatar/avatar-page-content.tsx b/components/avatar/avatar-page-content.tsx
index be9bf63..d8e01c8 100644
--- a/components/avatar/avatar-page-content.tsx
+++ b/components/avatar/avatar-page-content.tsx
@@ -45,5 +45,13 @@ export function AvatarPageContent() {
     );
   }
 
-  return <PetHabitat customization={customization} fillViewport />;
+  return (
+    <PetHabitat
+      customization={customization}
+      fillViewport
+      onNameChange={(name) =>
+        setCustomization((current) => ({ ...current, name }))
+      }
+    />
+  );
 }
diff --git a/components/landing/landing-pet-preview.tsx b/components/landing/landing-pet-preview.tsx
index bf9613b..434dad3 100644
--- a/components/landing/landing-pet-preview.tsx
+++ b/components/landing/landing-pet-preview.tsx
@@ -131,6 +131,10 @@ export function LandingPetPreview() {
       customization={customization}
       className="w-full max-w-sm"
       showStyleLink={false}
+      nameEditable={isSignedIn}
+      onNameChange={(name) =>
+        setCustomization((current) => ({ ...current, name }))
+      }
       petScale={petScale}
       lcdClassName="tamagotchi-lcd-landing"
       lcdRef={lcdRef}
diff --git a/components/layout/habit-brand.tsx b/components/layout/habit-brand.tsx
index 6288bbf..7feb1dd 100644
--- a/components/layout/habit-brand.tsx
+++ b/components/layout/habit-brand.tsx
@@ -41,7 +41,7 @@ export function HabitBrand({
         />
       ) : (
         <span
-          className="font-pixel select-none text-[10px] uppercase tracking-widest text-primary"
+          className="font-pixel select-none text-[10px] tracking-wide text-primary"
           aria-hidden="true"
         >
           HaBit
diff --git a/components/onboarding/onboarding-customize-form.tsx b/components/onboarding/onboarding-customize-form.tsx
index 1aa02a5..eb8c3d0 100644
--- a/components/onboarding/onboarding-customize-form.tsx
+++ b/components/onboarding/onboarding-customize-form.tsx
@@ -30,7 +30,7 @@ export function OnboardingCustomizeForm() {
         },
         { completeOnboarding: true },
       );
-      toast("Avatar confirmed. Welcome to Habit Pet!", "success");
+      toast("Avatar confirmed. Welcome to HaBit Pet!", "success");
       router.push(routes.avatar);
       router.refresh();
     } catch (saveError) {
@@ -49,7 +49,7 @@ export function OnboardingCustomizeForm() {
   return (
     <AvatarCustomizeLayout
       eyebrow="Step 2 of 2"
-      title="Create your Habit Pet"
+      title="Create your HaBit Pet"
       description="Customize your pet's look, give them a name, and confirm before entering the app."
     >
       <CharacterCreator
diff --git a/components/onboarding/onboarding-quiz-form.tsx b/components/onboarding/onboarding-quiz-form.tsx
index 3182601..d4e8124 100644
--- a/components/onboarding/onboarding-quiz-form.tsx
+++ b/components/onboarding/onboarding-quiz-form.tsx
@@ -54,7 +54,7 @@ export function OnboardingQuizForm() {
             Step 1 of 2
           </p>
           <h1 className="mt-2 text-2xl font-semibold tracking-tight">
-            Welcome to Habit Pet
+            Welcome to HaBit Pet
           </h1>
           <p className="mt-2 text-sm text-muted-foreground">
             Choose a focus area, then design your pet in the next step.
diff --git a/components/pet/pet-habitat.tsx b/components/pet/pet-habitat.tsx
index d3a3809..cebb7bb 100644
--- a/components/pet/pet-habitat.tsx
+++ b/components/pet/pet-habitat.tsx
@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 
 import { AnimatedPetSprite } from "@/components/pet/animated-pet-sprite";
 import { ParallaxRoomBackground } from "@/components/pet/parallax-room-background";
+import { PetNameHeader } from "@/components/pet/pet-name-header";
 import { PetStyleLink } from "@/components/pet/pet-style-link";
 import { PixelGauge } from "@/components/pet/pixel-gauge";
 import type { AvatarCustomization } from "@/lib/avatar-customization-storage";
@@ -23,6 +24,8 @@ type PetHabitatProps = {
   className?: string;
   fillViewport?: boolean;
   showStyleLink?: boolean;
+  nameEditable?: boolean;
+  onNameChange?: (name: string) => void;
   petScale?: number;
   lcdClassName?: string;
   lcdRef?: React.Ref<HTMLDivElement>;
@@ -39,6 +42,8 @@ export function PetHabitat({
   className,
   fillViewport = false,
   showStyleLink = true,
+  nameEditable = true,
+  onNameChange,
   petScale,
   lcdClassName: lcdClassNameOverride,
   lcdRef,
@@ -83,12 +88,12 @@ export function PetHabitat({
 
   return (
     <div className={shellClassName}>
-      <div className="mb-3 shrink-0 border-b-2 border-border/60 pb-3">
-        <p className="text-sm text-foreground">{customization.name}</p>
-        <p className="mt-1 text-[9px] uppercase tracking-[0.25em] text-secondary">
-          {MOOD_LABELS[condition.mood]}
-        </p>
-      </div>
+      <PetNameHeader
+        name={customization.name}
+        moodLabel={MOOD_LABELS[condition.mood]}
+        editable={nameEditable}
+        onNameChange={onNameChange}
+      />
 
       <div ref={lcdRef} className={lcdClassName}>
         <ParallaxRoomBackground roomId={roomId as RoomBackgroundId} />
diff --git a/components/pet/pet-name-header.tsx b/components/pet/pet-name-header.tsx
new file mode 100644
index 0000000..55ca268
--- /dev/null
+++ b/components/pet/pet-name-header.tsx
@@ -0,0 +1,166 @@
+"use client";
+
+import { Pencil } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+
+import { Input } from "@/components/ui/input";
+import {
+  DEFAULT_AVATAR_NAME,
+  saveAvatarName,
+} from "@/lib/avatar-customization-storage";
+import { cn } from "@/lib/utils";
+
+type PetNameHeaderProps = {
+  name: string;
+  moodLabel: string;
+  editable?: boolean;
+  onNameChange?: (name: string) => void;
+  className?: string;
+};
+
+export function PetNameHeader({
+  name,
+  moodLabel,
+  editable = true,
+  onNameChange,
+  className,
+}: PetNameHeaderProps) {
+  const [displayName, setDisplayName] = useState(name);
+  const [isEditing, setIsEditing] = useState(false);
+  const [draft, setDraft] = useState(name);
+  const [isSaving, setIsSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    setDisplayName(name);
+    if (!isEditing) {
+      setDraft(name);
+    }
+  }, [name, isEditing]);
+
+  useEffect(() => {
+    if (isEditing) {
+      inputRef.current?.focus();
+      inputRef.current?.select();
+    }
+  }, [isEditing]);
+
+  const startEditing = () => {
+    if (!editable || isSaving) {
+      return;
+    }
+
+    setDraft(displayName);
+    setError(null);
+    setIsEditing(true);
+  };
+
+  const cancelEditing = () => {
+    setDraft(displayName);
+    setError(null);
+    setIsEditing(false);
+  };
+
+  const commitName = async () => {
+    const trimmed = draft.trim() || DEFAULT_AVATAR_NAME;
+
+    if (trimmed === displayName) {
+      setIsEditing(false);
+      return;
+    }
+
+    if (!editable) {
+      setIsEditing(false);
+      return;
+    }
+
+    setIsSaving(true);
+    setError(null);
+
+    try {
+      const saved = await saveAvatarName(trimmed);
+      setDisplayName(saved);
+      onNameChange?.(saved);
+      setIsEditing(false);
+    } catch (commitError) {
+      setError(
+        commitError instanceof Error
+          ? commitError.message
+          : "Could not save pet name.",
+      );
+      setDraft(displayName);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <div
+      className={cn("mb-3 shrink-0 border-b-2 border-border/60 pb-3", className)}
+      onClick={(event) => {
+        if (isEditing) {
+          event.stopPropagation();
+        }
+      }}
+    >
+      {isEditing ? (
+        <div className="space-y-2">
+          <Input
+            ref={inputRef}
+            value={draft}
+            maxLength={32}
+            disabled={isSaving}
+            aria-label="Pet name"
+            className="h-9 font-pixel text-base"
+            onChange={(event) => setDraft(event.target.value)}
+            onKeyDown={(event) => {
+              if (event.key === "Enter") {
+                event.preventDefault();
+                void commitName();
+              }
+
+              if (event.key === "Escape") {
+                event.preventDefault();
+                cancelEditing();
+              }
+            }}
+            onBlur={() => {
+              void commitName();
+            }}
+          />
+          {error ? <p className="text-xs text-red-500">{error}</p> : null}
+        </div>
+      ) : (
+        <div className="flex items-start gap-2">
+          <p className="min-w-0 flex-1 font-pixel text-base leading-snug text-foreground">
+            {displayName}
+          </p>
+          {editable ? (
+            <button
+              type="button"
+              aria-label="Edit pet name"
+              title="Edit pet name"
+              disabled={isSaving}
+              onClick={(event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                startEditing();
+              }}
+              className="flex shrink-0 items-center justify-center border-2 border-border bg-card/80 p-1.5 text-muted-foreground shadow-[var(--retro-shadow-sm)] transition-colors hover:border-primary/60 hover:text-foreground"
+            >
+              <Pencil
+                aria-hidden="true"
+                className="size-3.5"
+                strokeWidth={2.5}
+              />
+            </button>
+          ) : null}
+        </div>
+      )}
+      <p className="mt-1.5 text-xs uppercase tracking-[0.2em] text-secondary">
+        {moodLabel}
+      </p>
+    </div>
+  );
+}
diff --git a/components/profile/profile-preferences-form.tsx b/components/profile/profile-preferences-form.tsx
index 656234e..450e459 100644
--- a/components/profile/profile-preferences-form.tsx
+++ b/components/profile/profile-preferences-form.tsx
@@ -369,7 +369,7 @@ export function ProfilePreferencesForm({ email }: ProfilePreferencesFormProps) {
             />
           </div>
           <p className="text-xs text-muted-foreground">
-            In-app reminders appear inside Habit Pet while a tab is open.
+            In-app reminders appear inside HaBit Pet while a tab is open.
             Browser (OS) reminders use the Web Notifications API and may appear
             in your system notification center. Reminders fire once per day at
             your chosen local time.
diff --git a/lib/daily-reminders.ts b/lib/daily-reminders.ts
index 8462a86..d3fae8f 100644
--- a/lib/daily-reminders.ts
+++ b/lib/daily-reminders.ts
@@ -174,7 +174,7 @@ export function showTestSystemDailyReminderNotification(
   }
 
   const { body, targetUrl } = buildDailyReminderNotification(status);
-  const notification = new Notification("Test: Habit Pet reminder", {
+  const notification = new Notification("Test: HaBit Pet reminder", {
     body: `This is a browser test notification. ${body}`,
     tag: `habit-pet-daily-reminder-test-${Date.now()}`,
   });
diff --git a/lib/openrouter.ts b/lib/openrouter.ts
index b312155..e40417f 100644
--- a/lib/openrouter.ts
+++ b/lib/openrouter.ts
@@ -46,7 +46,7 @@ export async function generateAiTaskLabels(
       Authorization: `Bearer ${apiKey}`,
       "Content-Type": "application/json",
       "HTTP-Referer": siteUrl,
-      "X-Title": "Habit Pet",
+      "X-Title": "HaBit Pet",
     },
     body: JSON.stringify({
       model: DEFAULT_OPENROUTER_MODEL,
diff --git a/lib/reminder-delivery.ts b/lib/reminder-delivery.ts
index 77d903e..ad468b9 100644
--- a/lib/reminder-delivery.ts
+++ b/lib/reminder-delivery.ts
@@ -3,7 +3,7 @@ export const reminderDeliveryOptions = [
     value: "in_app",
     label: "In-app",
     description:
-      "Show reminders inside Habit Pet when you have the site open in a tab.",
+      "Show reminders inside HaBit Pet when you have the site open in a tab.",
   },
   {
     value: "system",