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.

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 }))
+      }
+    />
+  );
 }

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}

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

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

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.

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} />

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>
+  );
+}

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.