From 72ea0a561150292830c88196d7e0ecd90eb2fc47 Mon Sep 17 00:00:00 2001
From: Universe <universe@grida.co>
Date: Mon, 19 Jan 2026 22:58:49 +0900
Subject: [PATCH 1/6] feat: add PhoneCountryPicker component and integrate
 default country selection for phone fields

---
 .../private/editor/[form_id]/fields/route.ts  |  11 +-
 .../extension/phone-country-picker.tsx        | 146 ++++++++++++++++++
 editor/components/formfield/form-field.tsx    |   8 +-
 .../formfield/phone-field/phone-field.tsx     |   3 +-
 editor/grida-forms-hosted/types.ts            |  12 +-
 editor/scaffolds/panels/field-edit-panel.tsx  |  81 +++++++++-
 6 files changed, 253 insertions(+), 8 deletions(-)
 create mode 100644 editor/components/extension/phone-country-picker.tsx

diff --git a/editor/app/(api)/private/editor/[form_id]/fields/route.ts b/editor/app/(api)/private/editor/[form_id]/fields/route.ts
index e6ec201be4..c26b656065 100644
--- a/editor/app/(api)/private/editor/[form_id]/fields/route.ts
+++ b/editor/app/(api)/private/editor/[form_id]/fields/route.ts
@@ -65,7 +65,7 @@ export async function POST(
       autocomplete: init.autocomplete,
       data: safe_data_field({
         type: init.type,
-        data: init.data as any,
+        data: init.data,
       }) as any,
       accept: init.accept,
       multiple: init.multiple,
@@ -323,9 +323,16 @@ function safe_data_field({
   data,
 }: {
   type: FormInputType;
-  data?: FormFieldDataSchema;
+  data?: FormFieldDataSchema | null;
 }): FormFieldDataSchema | undefined | null {
   switch (type) {
+    case "tel": {
+      // Keep `data` as an object (if provided) so we can safely persist tel configs
+      // such as `default_country` without losing shape.
+      if (!data) return data;
+      if (typeof data === "object") return data;
+      return {};
+    }
     case "payment": {
       // TODO: enhance the schema validation with external libraries
       if (!data || !(data as PaymentFieldData).type) {
diff --git a/editor/components/extension/phone-country-picker.tsx b/editor/components/extension/phone-country-picker.tsx
new file mode 100644
index 0000000000..85fc45fdb3
--- /dev/null
+++ b/editor/components/extension/phone-country-picker.tsx
@@ -0,0 +1,146 @@
+import * as React from "react";
+import { CheckIcon, ChevronsUpDown } from "lucide-react";
+import * as RPNInput from "react-phone-number-input";
+import flags from "react-phone-number-input/flags";
+
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { cn } from "@/components/lib/utils";
+
+/**
+ * ISO 3166-1 alpha-2 region code (e.g. "US", "KR").
+ *
+ * Note: this is NOT the E.164 country calling code (+1, +82, ...).
+ */
+export type PhoneCountryCode = RPNInput.Country;
+
+export type PhoneCountryPickerOption = {
+  label: string;
+  value: PhoneCountryCode;
+};
+
+export type PhoneCountryPickerProps = {
+  disabled?: boolean;
+  value: PhoneCountryCode;
+  options: PhoneCountryPickerOption[];
+  onChange: (country: PhoneCountryCode) => void;
+  className?: string;
+};
+
+interface PhoneCountryPickerItemProps extends RPNInput.FlagProps {
+  selectedCountry: PhoneCountryCode;
+  onChange: (country: PhoneCountryCode) => void;
+}
+
+const PhoneCountryPickerItem = ({
+  country,
+  countryName,
+  selectedCountry,
+  onChange,
+}: PhoneCountryPickerItemProps) => {
+  return (
+    <CommandItem className="gap-2" onSelect={() => onChange(country)}>
+      <FlagComponent country={country} countryName={countryName} />
+      <span className="flex-1 text-sm">{countryName}</span>
+      <span className="text-sm text-foreground/50">{`+${RPNInput.getCountryCallingCode(country)}`}</span>
+      <CheckIcon
+        className={`ml-auto size-4 ${country === selectedCountry ? "opacity-100" : "opacity-0"}`}
+      />
+    </CommandItem>
+  );
+};
+
+const FlagComponent = ({ country, countryName }: RPNInput.FlagProps) => {
+  const Flag = flags[country];
+
+  return (
+    <span className="flex h-4 w-6 overflow-hidden rounded-sm bg-foreground/20 [&_svg]:size-full">
+      {Flag && (
+        <Flag
+          title={countryName}
+          // https://github.com/omeralpi/shadcn-phone-input/issues/75#issue-3056082305
+          // @ts-expect-error not-typed
+          style={{ width: "auto" }}
+        />
+      )}
+    </span>
+  );
+};
+
+/**
+ * Phone country picker (searchable) that selects an ISO-3166-1 alpha-2 region,
+ * and displays the derived country calling code (+...).
+ */
+export function PhoneCountryPicker({
+  disabled,
+  value: selectedCountry,
+  options: countryList,
+  onChange,
+  className,
+}: PhoneCountryPickerProps) {
+  const selectedLabel =
+    countryList.find((c) => c.value === selectedCountry)?.label ??
+    selectedCountry;
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          type="button"
+          variant="outline"
+          className={cn("w-full justify-between gap-2 px-3 focus:z-10", className)}
+          disabled={disabled}
+        >
+          <span className="flex min-w-0 items-center gap-2">
+            <FlagComponent country={selectedCountry} countryName={selectedLabel} />
+            <span className="line-clamp-1 text-left">{selectedLabel}</span>
+            <span className="ml-auto shrink-0 text-sm text-foreground/50">{`+${RPNInput.getCountryCallingCode(
+              selectedCountry
+            )}`}</span>
+          </span>
+          <ChevronsUpDown
+            className={cn(
+              "size-4 shrink-0 opacity-50",
+              disabled ? "hidden" : "opacity-100"
+            )}
+          />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[320px] p-0">
+        <Command>
+          <CommandInput placeholder="Search country..." />
+          <CommandList>
+            <ScrollArea className="h-72">
+              <CommandEmpty>No country found.</CommandEmpty>
+              <CommandGroup>
+                {countryList.map(({ value, label }) => (
+                  <PhoneCountryPickerItem
+                    key={value}
+                    country={value}
+                    countryName={label}
+                    selectedCountry={selectedCountry}
+                    onChange={onChange}
+                  />
+                ))}
+              </CommandGroup>
+            </ScrollArea>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
diff --git a/editor/components/formfield/form-field.tsx b/editor/components/formfield/form-field.tsx
index e869b3ff6c..be5a47482e 100644
--- a/editor/components/formfield/form-field.tsx
+++ b/editor/components/formfield/form-field.tsx
@@ -5,6 +5,7 @@ import type {
   Option,
   FormFieldDataSchema,
   PaymentFieldData,
+  PhoneFieldData,
 } from "@/grida-forms-hosted/types";
 import { Select as HtmlSelect } from "@/components/vanilla/select";
 import {
@@ -243,7 +244,6 @@ function MonoFormField({
       <>
         <span>{label || name}</span>
         {src && (
-          // eslint-disable-next-line @next/next/no-img-element
           <img
             src={src}
             alt={label || name}
@@ -302,10 +302,14 @@ function MonoFormField({
           );
         }
 
+        const defaultCountry = (data as PhoneFieldData | undefined)
+          ?.default_country;
+
         return (
           // @ts-expect-error - PhoneField component prop type mismatch
           <PhoneField
             {...(sharedInputProps as React.ComponentProps<"input">)}
+            defaultCountry={defaultCountry as any}
           />
         );
       }
@@ -665,7 +669,6 @@ function MonoFormField({
             <span className="w-full py-3 ms-2 text-sm font-medium text-neutral-900 dark:text-neutral-300">
               {item.label}
               {item.src && (
-                // eslint-disable-next-line @next/next/no-img-element
                 <img
                   src={item.src}
                   alt={item.label || item.value}
@@ -854,7 +857,6 @@ function SafeValueSelect({
             >
               {option.src ? (
                 <div className="flex items-center gap-2">
-                  {/* eslint-disable-next-line @next/next/no-img-element */}
                   <img
                     src={option.src}
                     alt={option.label || option.value}
diff --git a/editor/components/formfield/phone-field/phone-field.tsx b/editor/components/formfield/phone-field/phone-field.tsx
index a2584d4f2c..2cfe66bb0f 100644
--- a/editor/components/formfield/phone-field/phone-field.tsx
+++ b/editor/components/formfield/phone-field/phone-field.tsx
@@ -9,7 +9,8 @@ const PhoneFieldDefaultCountryContext = React.createContext<
 
 function usePhoneFieldDefaultCountry(fallback?: CountryCode) {
   const context = React.use(PhoneFieldDefaultCountryContext);
-  return context ?? fallback;
+  // Field-level fallback should override the provider default (geo).
+  return fallback ?? context;
 }
 
 export function PhoneFieldDefaultCountryProvider({
diff --git a/editor/grida-forms-hosted/types.ts b/editor/grida-forms-hosted/types.ts
index 356d942e85..b7aff0bee6 100644
--- a/editor/grida-forms-hosted/types.ts
+++ b/editor/grida-forms-hosted/types.ts
@@ -1,6 +1,7 @@
 import type { IpInfo } from "@/clients/ipinfo";
 import type palettes from "@/theme/palettes";
 import type { tokens } from "@grida/tokens";
+import type { CountryCode } from "libphonenumber-js/core";
 import type {
   Appearance,
   FontFamily,
@@ -319,7 +320,16 @@ export interface FormResponseField {
   storage_object_paths: string[] | null;
 }
 
-export type FormFieldDataSchema = PaymentFieldData | {};
+export interface PhoneFieldData {
+  /**
+   * Defaults the phone input's country selection (E.164 prefix).
+   *
+   * Stored in `grida_forms.attribute.data` with snake_case naming.
+   */
+  default_country?: CountryCode | (string & {});
+}
+
+export type FormFieldDataSchema = PaymentFieldData | PhoneFieldData | {};
 
 export type FormFieldStorageSchema =
   | XGridaStorageSchema
diff --git a/editor/scaffolds/panels/field-edit-panel.tsx b/editor/scaffolds/panels/field-edit-panel.tsx
index b4659caf2b..63887372ac 100644
--- a/editor/scaffolds/panels/field-edit-panel.tsx
+++ b/editor/scaffolds/panels/field-edit-panel.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useEffect, useReducer, useState } from "react";
+import React, { useEffect, useMemo, useReducer, useState } from "react";
 import {
   PanelClose,
   PanelContent,
@@ -21,6 +21,7 @@ import type {
   FormFieldDataSchema,
   FormFieldAutocompleteType,
   PaymentFieldData,
+  PhoneFieldData,
   FormFieldStorageSchema,
   FormFieldReferenceSchema,
 } from "@/grida-forms-hosted/types";
@@ -69,6 +70,11 @@ import { FieldValueExpression } from "./extensions/field-value-expression";
 import { tokens } from "@grida/tokens";
 import { TypeSelect } from "@/components/formfield-type-select";
 import type { Data } from "@/lib/data";
+import { getCountries } from "libphonenumber-js";
+import {
+  PhoneCountryPicker,
+  type PhoneCountryPickerOption,
+} from "@/components/extension/phone-country-picker";
 
 // @ts-expect-error - `FormInputType` includes many variants; this table intentionally defines defaults for a supported subset and treats missing types as `{}` at runtime.
 const default_field_init: {
@@ -145,6 +151,8 @@ const default_field_init: {
   },
 };
 
+const phone_default_country_codes = getCountries().sort();
+
 export type FieldSave = Omit<FormFieldUpsert, "form_id"> & {
   db_table_id: string;
 };
@@ -242,6 +250,23 @@ export function FieldEditPanel({
   );
   const [multiple, setMultiple] = useState(init?.multiple || false);
 
+  const phone_default_country_options = useMemo(() => {
+    let displayNames: Intl.DisplayNames | null = null;
+    try {
+      displayNames =
+        typeof Intl !== "undefined" && "DisplayNames" in Intl
+          ? new Intl.DisplayNames(["en"], { type: "region" })
+          : null;
+    } catch {
+      displayNames = null;
+    }
+
+    return phone_default_country_codes.map((code) => ({
+      value: code,
+      label: displayNames?.of(code) ?? code,
+    })) satisfies PhoneCountryPickerOption[];
+  }, []);
+
   const [storage_enabled, __set_storage_enabled] = useState(!!init?.storage);
   const [storage, setStorage] = useState<
     Partial<FormFieldStorageSchema | null | undefined>
@@ -509,6 +534,60 @@ export function FieldEditPanel({
               </PanelPropertyField>
             </PanelPropertyFields>
           </PanelPropertySection>
+          <PanelPropertySection hidden={type !== "tel"}>
+            <PanelPropertySectionTitle>Phone</PanelPropertySectionTitle>
+            <PanelPropertyFields>
+              <PanelPropertyField
+                label={"Override visitor country"}
+                description="When enabled, the selected country will be used as the default for this phone field."
+              >
+                <Switch
+                  checked={
+                    !!(
+                      (data as PhoneFieldData | null | undefined)?.default_country
+                    )
+                  }
+                  onCheckedChange={(checked) => {
+                    setData((prev) => {
+                      const base =
+                        prev && typeof prev === "object" ? { ...prev } : {};
+
+                      if (!checked) {
+                        delete (base as any).default_country;
+                      } else {
+                        (base as any).default_country =
+                          (base as any).default_country ?? "US";
+                      }
+
+                      return base as any;
+                    });
+                  }}
+                />
+              </PanelPropertyField>
+
+              {!!(
+                (data as PhoneFieldData | null | undefined)?.default_country
+              ) && (
+                <PanelPropertyField label={"Default country"}>
+                  <PhoneCountryPicker
+                    value={
+                      (((data as PhoneFieldData | null | undefined)
+                        ?.default_country as string | undefined) ?? "US") as any
+                    }
+                    options={phone_default_country_options}
+                    onChange={(country) => {
+                      setData((prev) => {
+                        const base =
+                          prev && typeof prev === "object" ? { ...prev } : {};
+                        (base as any).default_country = country;
+                        return base as any;
+                      });
+                    }}
+                  />
+                </PanelPropertyField>
+              )}
+            </PanelPropertyFields>
+          </PanelPropertySection>
           <PanelPropertySection hidden={type !== "payment"}>
             <PanelPropertySectionTitle>Payment</PanelPropertySectionTitle>
             <PanelPropertyFields>

From f29d0cd03d8673f18f45e5ad6d29efa1bae50046 Mon Sep 17 00:00:00 2001
From: Universe <universe@grida.co>
Date: Mon, 19 Jan 2026 23:06:21 +0900
Subject: [PATCH 2/6] refactor: improve language selection logic in email
 challenge route to prioritize form document language

---
 .../[session]/field/[field]/challenge/email/start/route.ts   | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/editor/app/(api)/(public)/v1/session/[session]/field/[field]/challenge/email/start/route.ts b/editor/app/(api)/(public)/v1/session/[session]/field/[field]/challenge/email/start/route.ts
index 47bcaac8ed..def2c4ba9e 100644
--- a/editor/app/(api)/(public)/v1/session/[session]/field/[field]/challenge/email/start/route.ts
+++ b/editor/app/(api)/(public)/v1/session/[session]/field/[field]/challenge/email/start/route.ts
@@ -153,8 +153,9 @@ export async function POST(
       : undefined;
   const brand_support_contact = publisher.includes("@") ? publisher : undefined;
 
-  const langCandidate =
-    www && typeof www.lang === "string" && www.lang ? www.lang : formDoc.lang;
+  // Prefer the per-form document language when set; otherwise fall back to tenant/published `www.lang`.
+  // (Treat empty strings as "unset".)
+  const langCandidate = formDoc.lang?.trim() || www?.lang?.trim() || null;
   const emailLang: CIAMVerificationEmailLang = select_lang(
     langCandidate,
     supported_languages,

From 90ba759e3c7f9ed0aa305714adec5b433bf4d8d1 Mon Sep 17 00:00:00 2001
From: Universe <universe@grida.co>
Date: Mon, 19 Jan 2026 23:31:58 +0900
Subject: [PATCH 3/6] feat: implement language selection improvements in email
 challenge routes and enhance site settings form with language options

---
 .../[field]/challenge/email/start/route.ts    | 10 +--
 .../ciam/auth/challenge/with-email/route.ts   | 10 +--
 .../[tenant]/api/p/access/with-email/route.ts | 10 +--
 .../[proj]/(console)/(resources)/www/page.tsx | 22 ++++--
 .../(resources)/www/section-general.tsx       | 68 ++++++++++++++++---
 5 files changed, 95 insertions(+), 25 deletions(-)

diff --git a/editor/app/(api)/(public)/v1/session/[session]/field/[field]/challenge/email/start/route.ts b/editor/app/(api)/(public)/v1/session/[session]/field/[field]/challenge/email/start/route.ts
index def2c4ba9e..3be46c9325 100644
--- a/editor/app/(api)/(public)/v1/session/[session]/field/[field]/challenge/email/start/route.ts
+++ b/editor/app/(api)/(public)/v1/session/[session]/field/[field]/challenge/email/start/route.ts
@@ -8,6 +8,7 @@ import TenantCIAMEmailVerification, {
 import { otp6 } from "@/lib/crypto/otp";
 import { service_role } from "@/lib/supabase/server";
 import { select_lang } from "@/i18n/utils";
+import { getLocale } from "@/i18n/server";
 import {
   challengeEmailStateKey,
   loadChallengeEmailContext,
@@ -156,10 +157,11 @@ export async function POST(
   // Prefer the per-form document language when set; otherwise fall back to tenant/published `www.lang`.
   // (Treat empty strings as "unset".)
   const langCandidate = formDoc.lang?.trim() || www?.lang?.trim() || null;
-  const emailLang: CIAMVerificationEmailLang = select_lang(
-    langCandidate,
-    supported_languages,
-    "en"
+  // Prefer the visitor's device language. If unsupported, fall back to the form/tenant default.
+  const fallback_lang = select_lang(langCandidate, supported_languages, "en");
+  const emailLang: CIAMVerificationEmailLang = await getLocale(
+    [...supported_languages],
+    fallback_lang
   );
   const { error: resend_err } = await resend.emails.send({
     from: `${brand_name} <no-reply@accounts.grida.co>`,
diff --git a/editor/app/(tenant)/~/[tenant]/api/ciam/auth/challenge/with-email/route.ts b/editor/app/(tenant)/~/[tenant]/api/ciam/auth/challenge/with-email/route.ts
index c3ff5761c5..1b1dd122af 100644
--- a/editor/app/(tenant)/~/[tenant]/api/ciam/auth/challenge/with-email/route.ts
+++ b/editor/app/(tenant)/~/[tenant]/api/ciam/auth/challenge/with-email/route.ts
@@ -8,6 +8,7 @@ import TenantCIAMEmailVerification, {
 } from "@/theme/templates-email/ciam-verifiaction/default";
 import { otp6 } from "@/lib/crypto/otp";
 import { select_lang } from "@/i18n/utils";
+import { getLocale } from "@/i18n/server";
 
 /**
  * POST /api/ciam/auth/challenge/with-email
@@ -118,10 +119,11 @@ export async function POST(
       ? publisher
       : undefined;
 
-    const emailLang: CIAMVerificationEmailLang = select_lang(
-      www.lang,
-      supported_languages,
-      "en"
+    // Prefer the visitor's device language. If unsupported, fall back to the tenant default.
+    const fallback_lang = select_lang(www.lang, supported_languages, "en");
+    const emailLang: CIAMVerificationEmailLang = await getLocale(
+      [...supported_languages],
+      fallback_lang
     );
     const { error: resend_err } = await resend.emails.send({
       from: `${brand_name} <no-reply@accounts.grida.co>`,
diff --git a/editor/app/(tenant)/~/[tenant]/api/p/access/with-email/route.ts b/editor/app/(tenant)/~/[tenant]/api/p/access/with-email/route.ts
index 454140f61d..39d4432e7b 100644
--- a/editor/app/(tenant)/~/[tenant]/api/p/access/with-email/route.ts
+++ b/editor/app/(tenant)/~/[tenant]/api/p/access/with-email/route.ts
@@ -8,6 +8,7 @@ import TenantCustomerPortalAccessEmailVerification, {
 } from "@/theme/templates-email/customer-portal-verification/default";
 import { otp6 } from "@/lib/crypto/otp";
 import { select_lang } from "@/i18n/utils";
+import { getLocale } from "@/i18n/server";
 // TODO: add rate limiting
 export async function POST(
   req: NextRequest,
@@ -132,10 +133,11 @@ export async function POST(
       : undefined;
   const brand_support_contact = publisher.includes("@") ? publisher : undefined;
 
-  const emailLang: CustomerPortalVerificationEmailLang = select_lang(
-    www.lang,
-    supported_languages,
-    "en"
+  // Prefer the visitor's device language. If unsupported, fall back to the tenant default.
+  const fallback_lang = select_lang(www.lang, supported_languages, "en");
+  const emailLang: CustomerPortalVerificationEmailLang = await getLocale(
+    [...supported_languages],
+    fallback_lang
   );
 
   const { error: resend_err } = await resend.emails.send({
diff --git a/editor/app/(workbench)/[org]/[proj]/(console)/(resources)/www/page.tsx b/editor/app/(workbench)/[org]/[proj]/(console)/(resources)/www/page.tsx
index 1931a24323..0e9b477b60 100644
--- a/editor/app/(workbench)/[org]/[proj]/(console)/(resources)/www/page.tsx
+++ b/editor/app/(workbench)/[org]/[proj]/(console)/(resources)/www/page.tsx
@@ -19,6 +19,8 @@ import { useForm } from "react-hook-form";
 import { Skeleton } from "@/components/ui/skeleton";
 import { FaviconEditor } from "@/scaffolds/www-theme-config/components/favicon";
 import { SiteDomainsSection } from "./section-domain";
+import type { PostgrestError } from "@supabase/supabase-js";
+import type { Database } from "@app/database";
 
 type ProjectWWW = {
   id: string;
@@ -26,6 +28,7 @@ type ProjectWWW = {
   project_id: number;
   title: string | null;
   description: string | null;
+  lang: string;
   og_image: string | null;
   favicon: {
     src: string;
@@ -33,6 +36,9 @@ type ProjectWWW = {
   } | null;
 };
 
+type ProjectWWWUpdate = Partial<ProjectWWW>;
+type WWWUpdateResult = { error: PostgrestError | null };
+
 function useSiteSettings() {
   const project = useProject();
   const client = useMemo(() => createBrowserWWWClient(), []);
@@ -51,7 +57,7 @@ function useSiteSettings() {
   });
 
   const update = useCallback(
-    async (payload: Partial<ProjectWWW>) => {
+    async (payload: ProjectWWWUpdate): Promise<WWWUpdateResult> => {
       const task = await client
         .from("www")
         .update(payload)
@@ -206,6 +212,7 @@ export default function ProjectWWWSettingsPage() {
         defaultValues={{
           title: data.title,
           description: data.description,
+          lang: data.lang,
         }}
         update={update}
       />
@@ -256,14 +263,20 @@ function FormSiteGeneral({
 }: {
   url: string;
   defaultValues: SiteGeneral;
-  update: (payload: SiteGeneral) => Promise<unknown>;
+  update: (payload: SiteGeneral) => Promise<WWWUpdateResult>;
 }) {
   const form = useForm<SiteGeneral>({
     defaultValues,
   });
 
   const onSubmit = form.handleSubmit(async (values) => {
-    return await update(values);
+    const res = await update(values);
+    // Reset dirty state to the saved values (react-hook-form best practice)
+    // so the Save button disables again until the next change.
+    if (!res.error) {
+      form.reset(values);
+    }
+    return res;
   });
 
   const { isSubmitting, isDirty } = form.formState;
@@ -278,9 +291,10 @@ function FormSiteGeneral({
           url={url}
           disabled={isSubmitting}
           value={form.watch()}
-          onValueChange={({ title, description }) => {
+          onValueChange={({ title, description, lang }) => {
             form.setValue("title", title, { shouldDirty: true });
             form.setValue("description", description, { shouldDirty: true });
+            form.setValue("lang", lang, { shouldDirty: true });
           }}
         />
       </CardContent>
diff --git a/editor/app/(workbench)/[org]/[proj]/(console)/(resources)/www/section-general.tsx b/editor/app/(workbench)/[org]/[proj]/(console)/(resources)/www/section-general.tsx
index d419433476..873e0fdd69 100644
--- a/editor/app/(workbench)/[org]/[proj]/(console)/(resources)/www/section-general.tsx
+++ b/editor/app/(workbench)/[org]/[proj]/(console)/(resources)/www/section-general.tsx
@@ -1,13 +1,30 @@
 "use client";
 
 import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+} from "@/components/ui/field";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { Textarea } from "@/components/ui/textarea";
 import { DotsVerticalIcon } from "@radix-ui/react-icons";
 
 export type SiteGeneral = {
   title: string | null;
   description: string | null;
+  /**
+   * Default/fallback language for public/tenant-facing experiences (e.g. verification emails).
+   * Keep this a short language code like "en", "ko".
+   */
+  lang: string;
 };
 
 export function SiteGeneralSection({
@@ -23,9 +40,9 @@ export function SiteGeneralSection({
 }) {
   return (
     <div className="space-y-6">
-      <div className="grid gap-4">
-        <div className="grid gap-2">
-          <Label htmlFor="title">Site Title</Label>
+      <FieldGroup className="gap-4">
+        <Field>
+          <FieldLabel htmlFor="title">Site Title</FieldLabel>
           <Input
             id="title"
             value={value.title ?? ""}
@@ -38,9 +55,10 @@ export function SiteGeneralSection({
             }
             placeholder="Enter your site title"
           />
-        </div>
-        <div className="grid gap-2">
-          <Label htmlFor="description">Site Description</Label>
+        </Field>
+
+        <Field>
+          <FieldLabel htmlFor="description">Site Description</FieldLabel>
           <Textarea
             id="description"
             disabled={disabled}
@@ -54,8 +72,40 @@ export function SiteGeneralSection({
             placeholder="Enter your site description"
             rows={3}
           />
-        </div>
-      </div>
+        </Field>
+
+        <Field>
+          <FieldLabel>Default (fallback) language</FieldLabel>
+          <Select
+            value={value.lang}
+            onValueChange={(v) =>
+              onValueChange?.({
+                ...value,
+                lang: v,
+              })
+            }
+            disabled={disabled}
+          >
+            <SelectTrigger className="w-full">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="en">English (default)</SelectItem>
+              <SelectItem value="ko">Korean / 한국어</SelectItem>
+              <SelectItem value="ja">Japanese / 日本語</SelectItem>
+              <SelectItem value="es">Spanish / Español</SelectItem>
+              <SelectItem value="zh">Chinese / 中文</SelectItem>
+            </SelectContent>
+          </Select>
+          <FieldDescription>
+            Grida first tries the visitor’s device language. If it’s not
+            supported, it falls back to this language.
+            <br />
+            Targeting a global audience? Keep this as English. Targeting a
+            specific locale? Set it to match.
+          </FieldDescription>
+        </Field>
+      </FieldGroup>
 
       <div>
         <h3 className="text-sm font-medium mb-2">Preview</h3>

From 79d3c580d1b71ce3f8ee760c8e28c5f666da56e3 Mon Sep 17 00:00:00 2001
From: Universe <universe@grida.co>
Date: Tue, 20 Jan 2026 00:14:05 +0900
Subject: [PATCH 4/6] feat: add dynamic portal title fetching and improve
 layout structure in CustomerPortalLoginPage

---
 .../(tenant)/~/[tenant]/(p)/p/login/page.tsx  | 61 +++++++++++++++++--
 1 file changed, 56 insertions(+), 5 deletions(-)

diff --git a/editor/app/(tenant)/~/[tenant]/(p)/p/login/page.tsx b/editor/app/(tenant)/~/[tenant]/(p)/p/login/page.tsx
index 35d33f1f2b..a78865e6a9 100644
--- a/editor/app/(tenant)/~/[tenant]/(p)/p/login/page.tsx
+++ b/editor/app/(tenant)/~/[tenant]/(p)/p/login/page.tsx
@@ -1,15 +1,66 @@
 import React from "react";
 import PortalLogin from "./login";
 import { getLocale } from "@/i18n/server";
+import Link from "next/link";
+import { createWWWClient } from "@/lib/supabase/server";
+import type { Database } from "@app/database";
 
-export default async function CustomerPortalLoginPage() {
+type Params = {
+  tenant: string;
+};
+
+type WwwPublicRow = Database["grida_www"]["Views"]["www_public"]["Row"];
+
+async function fetchPortalTitle(tenant: string) {
+  const client = await createWWWClient();
+
+  const { data: wwwPublic } = await client
+    .from("www_public")
+    .select("title")
+    .eq("name", tenant)
+    .single()
+    .returns<Pick<WwwPublicRow, "title">>();
+
+  const title =
+    typeof wwwPublic?.title === "string" && wwwPublic.title.trim()
+      ? wwwPublic.title
+      : "Customer Portal";
+
+  return title;
+}
+
+export default async function CustomerPortalLoginPage({
+  params,
+}: {
+  params: Promise<Params>;
+}) {
+  const { tenant } = await params;
   const locale = await getLocale(["en", "ko"]);
+  const title = await fetchPortalTitle(tenant);
 
   return (
-    <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10">
-      <div className="w-full max-w-sm">
-        <PortalLogin locale={locale} />
-      </div>
+    <div className="min-h-svh bg-background flex flex-col">
+      <header className="h-14 border-b" data-testid="portal-login-navbar">
+        <div className="mx-auto h-full w-full max-w-screen-sm px-6 flex items-center">
+          <Link
+            href="#"
+            className="flex items-center gap-2 min-w-0"
+            data-testid="portal-login-navbar-brand-link"
+          >
+            <span
+              className="font-semibold truncate"
+              data-testid="portal-login-navbar-title"
+            >
+              {title}
+            </span>
+          </Link>
+        </div>
+      </header>
+      <main className="flex-1 flex items-center justify-center p-6 md:p-10">
+        <div className="w-full max-w-sm">
+          <PortalLogin locale={locale} />
+        </div>
+      </main>
     </div>
   );
 }

From 1fd8e4a9b95364d22076502ea849e0f2efd320b0 Mon Sep 17 00:00:00 2001
From: Universe <universe@grida.co>
Date: Tue, 20 Jan 2026 00:28:30 +0900
Subject: [PATCH 5/6] feat: implement temporary redirect for single campaign in
 portal session page

---
 .../~/[tenant]/(p)/p/session/[token]/page.tsx | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/editor/app/(tenant)/~/[tenant]/(p)/p/session/[token]/page.tsx b/editor/app/(tenant)/~/[tenant]/(p)/p/session/[token]/page.tsx
index f7bd26ea46..e83ba8f39a 100644
--- a/editor/app/(tenant)/~/[tenant]/(p)/p/session/[token]/page.tsx
+++ b/editor/app/(tenant)/~/[tenant]/(p)/p/session/[token]/page.tsx
@@ -7,6 +7,12 @@ import type { Database } from "@app/database";
 import type { PostgrestError } from "@supabase/supabase-js";
 import CampaignReferrerCard from "../west-campaign-referrer-card";
 
+// TODO(portal): The portal session page is not design-complete yet, but is used in production.
+// Today enterprise customers typically only have one active campaign, so we temporarily redirect
+// directly to the campaign page when there's only a single campaign in the portal session.
+// Remove this once the session page UX is finalized and multi-campaign is common.
+const TMP_SHOULD_REDIRECT_WHEN_SINGLE = true;
+
 type Params = {
   token: string;
 };
@@ -124,6 +130,20 @@ export default async function CustomerPortalSessionPage({
     console.error("[ciam]/referrer error", referrer_err);
   }
 
+  if (
+    TMP_SHOULD_REDIRECT_WHEN_SINGLE &&
+    iam_referrers &&
+    iam_referrers.length === 1
+  ) {
+    const r = iam_referrers[0];
+    const path = r?.campaign?.www_route_path;
+    const code = r?.code;
+    if (typeof path === "string" && path && typeof code === "string" && code) {
+      // FIXME: tenant url
+      return redirect(`${path}/t/${code}`);
+    }
+  }
+
   console.info("[ciam]/portal session redeemed", {
     tokenPreview,
     tokenLength: token.length,

From e45e934ff67434e364df9d65f63be034882361af Mon Sep 17 00:00:00 2001
From: Universe <universe@grida.co>
Date: Tue, 20 Jan 2026 01:06:06 +0900
Subject: [PATCH 6/6] feat: enhance customer handling in submit route to
 prevent duplicates and improve session management

---
 .../(api)/(public)/v1/submit/[id]/route.ts    | 145 +++++++++++++-----
 1 file changed, 106 insertions(+), 39 deletions(-)

diff --git a/editor/app/(api)/(public)/v1/submit/[id]/route.ts b/editor/app/(api)/(public)/v1/submit/[id]/route.ts
index 957826e874..a371281819 100644
--- a/editor/app/(api)/(public)/v1/submit/[id]/route.ts
+++ b/editor/app/(api)/(public)/v1/submit/[id]/route.ts
@@ -128,6 +128,15 @@ async function submit({
   formdata: FormData | URLSearchParams | Map<string, string>;
   meta: SessionMeta;
 }) {
+  function isRecord(v: unknown): v is Record<string, unknown> {
+    return typeof v === "object" && v !== null;
+  }
+
+  function readStringProp(obj: unknown, key: string): string | null {
+    if (!isRecord(obj)) return null;
+    const v = obj[key];
+    return typeof v === "string" && v ? v : null;
+  }
   // console.log("form_id", form_id);
 
   // check for mandatory meta
@@ -204,6 +213,54 @@ async function submit({
     : null;
 
   // customer handling
+  // NOTE: challenge_email can bind a verified customer to the response_session.
+  // When that happens, we must reuse that customer instead of creating a new
+  // fingerprint-based customer (which causes duplicate customers for one respondent).
+
+  const challenge_email_fields = fields.filter(
+    (f) => f.type === "challenge_email"
+  );
+
+  // These are also used later for persistence/binding.
+  let session_raw: Record<string, unknown> | null = null;
+  let session_customer_id: string | null = null;
+  let verified_customer_id: string | null = null;
+
+  if (challenge_email_fields.length > 0 && meta.session) {
+    const { data: response_session, error: response_session_err } =
+      await service_role.forms
+        .from("response_session")
+        .select("id, raw, customer_id")
+        .eq("id", meta.session)
+        .eq("form_id", form_id)
+        .single();
+
+    if (response_session_err || !response_session) {
+      console.error("submit/err/session", response_session_err);
+      return error(ERR.SERVICE_ERROR.code, { form_id }, meta);
+    }
+
+    session_raw =
+      (response_session.raw as Record<string, unknown> | null) ?? null;
+    session_customer_id = response_session.customer_id ?? null;
+
+    // If verification succeeded, the challenge state stores `customer_uid`.
+    // Use it as an authoritative identity fallback (even when response_session.customer_id
+    // wasn't bound due to stricter binding rules).
+    for (const f of challenge_email_fields) {
+      const key = `__challenge_email__${f.id}`;
+      const obj = session_raw?.[key];
+      const state = readStringProp(obj, "state");
+      const customer_uid = readStringProp(obj, "customer_uid");
+      if (state === "challenge-success" && customer_uid) {
+        verified_customer_id = customer_uid;
+        break;
+      }
+    }
+  }
+
+  const effective_session_customer_id =
+    session_customer_id ?? verified_customer_id ?? null;
 
   const _gf_customer_uuid: string | null = qval(
     formdata.get(SYSTEM_GF_CUSTOMER_UUID_KEY) as string
@@ -227,16 +284,50 @@ async function submit({
 
   // console.log("/submit::_gf_customer_uuid:", _gf_customer_uuid);
 
-  const customer = await upsert_customer_with({
-    project_id: form_reference.project_id,
-    uuid: _gf_customer_uuid,
-    hints: {
-      _fp_fingerprintjs_visitorid,
-      email: _gf_customer_email || undefined,
-      phone: _gf_customer_phone || undefined,
-      name: _gf_customer_name || undefined,
-    },
-  });
+  // Only create/upsert a customer when we do not already have a trusted customer id.
+  // This prevents duplicate customer rows for challenge_email flows.
+  const customer = effective_session_customer_id
+    ? null
+    : await upsert_customer_with({
+        project_id: form_reference.project_id,
+        uuid: _gf_customer_uuid,
+        hints: {
+          _fp_fingerprintjs_visitorid,
+          email: _gf_customer_email || undefined,
+          phone: _gf_customer_phone || undefined,
+          name: _gf_customer_name || undefined,
+        },
+      });
+
+  // Best-effort: if we have a verified/session customer, enrich it with submitted hints.
+  // Avoid writing empty values; keep this non-blocking.
+  if (effective_session_customer_id) {
+    const patch: {
+      last_seen_at: string;
+      email?: string;
+      phone?: string;
+      name?: string;
+    } = { last_seen_at: new Date().toISOString() };
+    if (_gf_customer_email) patch.email = _gf_customer_email;
+    if (_gf_customer_phone) patch.phone = _gf_customer_phone;
+    if (_gf_customer_name) patch.name = _gf_customer_name;
+
+    try {
+      const { error: cus_update_err } = await service_role.workspace
+        .from("customer")
+        .update(patch)
+        .eq("uid", effective_session_customer_id)
+        .eq("project_id", form_reference.project_id);
+      if (cus_update_err) {
+        console.error(
+          "customer::session_customer_update_error:",
+          cus_update_err
+        );
+      }
+    } catch (e) {
+      console.error("customer::session_customer_update_unexpected_error:", e);
+    }
+  }
 
   // console.log("/submit::customer:", customer);
 
@@ -285,7 +376,7 @@ async function submit({
   // TODO: this also needs to be migrated to db constraints
   const max_access_by_customer_error = await validate_max_access_by_customer({
     form_id,
-    customer_id: customer?.uid,
+    customer_id: effective_session_customer_id ?? customer?.uid ?? null,
     is_max_form_responses_by_customer_enabled,
     max_form_responses_by_customer,
   });
@@ -325,36 +416,10 @@ async function submit({
   // ==================================================
   // challenge_email gating (session-scoped verification)
   // ==================================================
-  const challenge_email_fields = fields.filter(
-    (f) => f.type === "challenge_email"
-  );
   const required_challenge_email_fields = challenge_email_fields.filter(
     (f) => f.required
   );
 
-  // These are also used later for persistence/binding.
-  let session_raw: Record<string, unknown> | null = null;
-  let session_customer_id: string | null = null;
-
-  if (challenge_email_fields.length > 0 && meta.session) {
-    const { data: response_session, error: response_session_err } =
-      await service_role.forms
-        .from("response_session")
-        .select("id, raw, customer_id")
-        .eq("id", meta.session)
-        .eq("form_id", form_id)
-        .single();
-
-    if (response_session_err || !response_session) {
-      console.error("submit/err/session", response_session_err);
-      return error(ERR.SERVICE_ERROR.code, { form_id }, meta);
-    }
-
-    session_raw =
-      (response_session.raw as Record<string, unknown> | null) ?? null;
-    session_customer_id = response_session.customer_id ?? null;
-  }
-
   if (required_challenge_email_fields.length > 0) {
     if (!meta.session || !session_raw) {
       return error(ERR.CHALLENGE_EMAIL_NOT_VERIFIED.code, { form_id }, meta);
@@ -508,7 +573,8 @@ async function submit({
         ip: meta.ip,
         // Prefer explicit customer from the submit payload; otherwise use session binding
         // (set only by trusted verification flows).
-        customer_id: customer?.uid ?? session_customer_id,
+        customer_id:
+          effective_session_customer_id ?? customer?.uid ?? session_customer_id,
         x_referer: meta.referer,
         x_useragent: meta.useragent,
         x_ipinfo: ipinfo_data as {},
@@ -545,7 +611,8 @@ async function submit({
             form_id,
             ...({
               fingerprint: _fp_fingerprintjs_visitorid,
-              customer_id: customer?.uid,
+              customer_id:
+                effective_session_customer_id ?? customer?.uid ?? undefined,
               session_id: meta.session || undefined,
             } satisfies FormLinkURLParams["alreadyresponded"]),
           },