feat(app): theme-based branding in UI copy (#1768)

## Summary
Replace hardcoded "HyperDX" in user-facing UI with the current theme's display name so deployments using the ClickStack theme show "ClickStack" (e.g. "Welcome to ClickStack", "ClickStack Cloud") instead of "HyperDX".

Closes HDX-3463.

## Changes

### Theme
- **ThemeProvider**: Add `useBrandDisplayName()` hook that returns `theme.displayName` ("HyperDX" or "ClickStack") for use in copy.

### Pages & layout
- **Auth**: Login/register page title and brand label use `useBrandDisplayName()`.
- **AuthLoadingBlocker**: "Loading HyperDX" → "Loading {brandName}".
- **JoinTeamPage**: Document title uses brand name.
- **LandingHeader**: "HyperDX Cloud" → "{brandName} Cloud" (desktop and mobile). Active link color scheme updated for theme consistency.
- **Spotlights**: Cloud action label and description use brand name.
- **Page titles**: All `<Head><title>` now suffix with current brand (Dashboard, Search, Client Sessions, Chart Explorer, My Team, Create a Dashboard, Alerts, DBDashboardImportPage).

### Copy and errors
- **OnboardingModal**: Welcome title and demo server success/error messages use brand name.
- **DBSearchPageAlertModal**, **WebhooksSection**, **TeamMembersSection**, **WebhookForm**: "Please contact HyperDX team" → "Please contact {brandName} team".
- **SessionsPage**: Empty state and setup instructions ("HyperDX integration", "HyperDX Otel Collector", "HyperDX Browser Integration") use brand name.
- **TeamPage**: ClickHouse settings tooltip about windowed queries uses brand name.
- **DBChartPage**: AI Assistant alert text ("on the HyperDX server") and Chart Explorer title use brand name.
- **SourceForm**: All help text that referred to "HyperDX" (materialized view tooltip, correlated source labels, metrics "not yet fully supported") use brand name.
- **HDXMultiSeriesTableChart**: CSV export filename "HyperDX_table_results" → "{brandName}_table_results".

## Testing
- With default/HyperDX theme: all existing strings should still read "HyperDX".
- With ClickStack theme (e.g. `NEXT_PUBLIC_THEME=clickstack` or dev theme override): titles, welcome text, errors, and help text should show "ClickStack" where appropriate.

## Notes
- No changes to SDK imports, type names (e.g. `HyperDXEventType`), or theme definition files.
- Brand is deployment-configured via `NEXT_PUBLIC_THEME`; in dev, theme can be switched for verification.

Author: elizabetdev

.changeset/theme-branding-ui-copy.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": minor
+---
+
+feat: Theme-based branding in UI copy. Replace hardcoded "HyperDX" with the current theme display name so ClickStack deployments show "ClickStack" (e.g. "Welcome to ClickStack", page titles, error messages, help text). Adds `useBrandDisplayName()` hook in ThemeProvider.

packages/app/src/AlertsPage.tsx

@@ -36,6 +36,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import { ErrorBoundary } from '@/components/Error/ErrorBoundary';
 import { PageHeader } from '@/components/PageHeader';
 
+import { useBrandDisplayName } from './theme/ThemeProvider';
 import { isAlertSilenceExpired } from './utils/alerts';
 import { getWebhookChannelIcon } from './utils/webhookIcons';
 import api from './api';
@@ -470,14 +471,15 @@ function AlertCardList({ alerts }: { alerts: AlertsPageItem[] }) {
 }
 
 export default function AlertsPage() {
+  const brandName = useBrandDisplayName();
   const { data, isError, isLoading } = api.useAlerts();
 
   const alerts = React.useMemo(() => data?.data || [], [data?.data]);
 
   return (
     <div data-testid="alerts-page" className="AlertsPage">
       <Head>
-        <title>Alerts - HyperDX</title>
+        <title>Alerts - {brandName}</title>
       </Head>
       <PageHeader>Alerts</PageHeader>
       <div className="my-4">

packages/app/src/AuthLoadingBlocker.tsx

@@ -1,8 +1,10 @@
 import { useEffect, useRef, useState } from 'react';
 
+import { useBrandDisplayName } from './theme/ThemeProvider';
 import api from './api';
 
 export default function AuthLoadingBlocker() {
+  const brandName = useBrandDisplayName();
   const { data: meData } = api.useMe();
 
   // increase number of periods rendered as a loading animation, 1 period per second
@@ -23,7 +25,7 @@ export default function AuthLoadingBlocker() {
             zIndex: 2147483647,
           }}
         >
-          Loading HyperDX
+          Loading {brandName}
           <span style={{ width: 0 }}>{'.'.repeat(periods)}</span>
         </div>
       )}

packages/app/src/AuthPage.tsx

@@ -14,6 +14,7 @@ import {
 } from '@mantine/core';
 import { IconAt, IconLock } from '@tabler/icons-react';
 
+import { useBrandDisplayName } from './theme/ThemeProvider';
 import api from './api';
 import * as config from './config';
 import LandingHeader from './LandingHeader';
@@ -26,6 +27,7 @@ type FormData = {
 };
 
 export default function AuthPage({ action }: { action: 'register' | 'login' }) {
+  const brandName = useBrandDisplayName();
   const { data: team, isLoading: teamIsLoading } = api.useTeam();
   const router = useRouter();
 
@@ -55,7 +57,7 @@ export default function AuthPage({ action }: { action: 'register' | 'login' }) {
 
   const verificationSent = msg === 'verify';
 
-  const title = `HyperDX - ${isRegister ? 'Sign up' : 'Login'}`;
+  const title = `${brandName} - ${isRegister ? 'Sign up' : 'Login'}`;
 
   useEffect(() => {
     // If an OSS user accidentally lands on /register after already creating a team
@@ -138,7 +140,7 @@ export default function AuthPage({ action }: { action: 'register' | 'login' }) {
               : isRegister
                 ? 'Register for '
                 : 'Login to '}
-            <span className="text-brand fw-bold">HyperDX</span>
+            <span className="text-brand fw-bold">{brandName}</span>
           </div>
           {action === 'login' && (
             <div className="text-center mb-2 ">Welcome back!</div>

packages/app/src/DBChartPage.tsx

@@ -31,6 +31,7 @@ import { SourceSelectControlled } from '@/components/SourceSelect';
 import { useChartAssistant } from '@/hooks/ai';
 import { withAppNav } from '@/layout';
 import { useSources } from '@/source';
+import { useBrandDisplayName } from '@/theme/ThemeProvider';
 import { parseTimeQuery, useNewTimeQuery } from '@/timeQuery';
 import { useLocalStorage } from '@/utils';
 
@@ -52,6 +53,7 @@ function AIAssistant({
   submitRef: React.RefObject<(() => void) | undefined>;
   aiAssistantEnabled: boolean;
 }) {
+  const brandName = useBrandDisplayName();
   const [opened, setOpened] = useState(false);
   const [alertDismissed, setAlertDismissed] = useLocalStorage(
     'ai-assistant-alert-dismissed',
@@ -131,8 +133,8 @@ function AIAssistant({
         >
           <Text size="xs" pt="2px">
             New AI Assistant available, enable with configuring the{' '}
-            <code>ANTHROPIC_API_KEY</code> environment variable on the HyperDX
-            server.
+            <code>ANTHROPIC_API_KEY</code> environment variable on the{' '}
+            {brandName} server.
           </Text>
         </Alert>
         <Divider mt="sm" />
@@ -202,6 +204,7 @@ function AIAssistant({
 }
 
 function DBChartExplorerPage() {
+  const brandName = useBrandDisplayName();
   const {
     searchedTimeRange,
     displayedTimeInputValue,
@@ -229,7 +232,7 @@ function DBChartExplorerPage() {
   return (
     <Box data-testid="chart-explorer-page" p="sm">
       <Head>
-        <title>Chart Explorer - HyperDX</title>
+        <title>Chart Explorer - {brandName}</title>
       </Head>
       <AIAssistant
         setConfig={setChartConfig}

packages/app/src/DBDashboardImportPage.tsx

@@ -32,6 +32,7 @@ import {
 
 import { PageHeader } from './components/PageHeader';
 import SelectControlled from './components/SelectControlled';
+import { useBrandDisplayName } from './theme/ThemeProvider';
 import { useCreateDashboard, useUpdateDashboard } from './dashboard';
 import { withAppNav } from './layout';
 import { useSources } from './source';
@@ -406,12 +407,13 @@ function Mapping({ input }: { input: Input }) {
 }
 
 function DBDashboardImportPage() {
+  const brandName = useBrandDisplayName();
   const [input, setInput] = useState<Input | null>(null);
 
   return (
     <div>
       <Head>
-        <title>Create a Dashboard - HyperDX</title>
+        <title>Create a Dashboard - {brandName}</title>
       </Head>
       <PageHeader>
         <div>Create Dashboard &gt; Import Dashboard</div>

packages/app/src/DBDashboardPage.tsx

@@ -85,6 +85,7 @@ import OnboardingModal from './components/OnboardingModal';
 import { Tags } from './components/Tags';
 import useDashboardFilters from './hooks/useDashboardFilters';
 import { useDashboardRefresh } from './hooks/useDashboardRefresh';
+import { useBrandDisplayName } from './theme/ThemeProvider';
 import { parseAsStringWithNewLines } from './utils/queryParsers';
 import { buildTableRowSearchUrl, DEFAULT_CHART_CONFIG } from './ChartUtils';
 import { IS_LOCAL_MODE } from './config';
@@ -675,6 +676,7 @@ function downloadObjectAsJson(object: object, fileName = 'output') {
 }
 
 function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
+  const brandName = useBrandDisplayName();
   const confirm = useConfirm();
 
   const router = useRouter();
@@ -1010,7 +1012,7 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
   return (
     <Box p="sm" data-testid="dashboard-page">
       <Head>
-        <title>Dashboard – HyperDX</title>
+        <title>Dashboard – {brandName}</title>
       </Head>
       <OnboardingModal />
       <EditTileModal

packages/app/src/DBSearchPage.tsx

@@ -108,7 +108,7 @@ import {
   useSource,
   useSources,
 } from '@/source';
-import { useAppTheme } from '@/theme/ThemeProvider';
+import { useAppTheme, useBrandDisplayName } from '@/theme/ThemeProvider';
 import {
   parseRelativeTimeQuery,
   parseTimeQuery,
@@ -806,6 +806,7 @@ const queryStateMap = {
 };
 
 function DBSearchPage() {
+  const brandName = useBrandDisplayName();
   // Next router is laggy behind window.location, which causes race
   // conditions with useQueryStates, so we'll parse it directly
   const paths = window.location.pathname.split('/');
@@ -1577,7 +1578,7 @@ function DBSearchPage() {
     >
       <Head>
         <title>
-          {savedSearch ? `${savedSearch.name} Search` : 'Search'} - HyperDX
+          {savedSearch ? `${savedSearch.name} Search` : 'Search'} - {brandName}
         </title>
       </Head>
       {!IS_LOCAL_MODE && isAlertModalOpen && (

packages/app/src/DBSearchPageAlertModal.tsx

@@ -39,6 +39,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import { useCreateSavedSearch } from '@/savedSearch';
 import { useSavedSearch } from '@/savedSearch';
 import { useSource } from '@/source';
+import { useBrandDisplayName } from '@/theme/ThemeProvider';
 import {
   ALERT_CHANNEL_OPTIONS,
   ALERT_INTERVAL_OPTIONS,
@@ -266,6 +267,7 @@ export const DBSearchPageAlertModal = ({
   onClose: () => void;
   open: boolean;
 }) => {
+  const brandName = useBrandDisplayName();
   const queryClient = useQueryClient();
   const createAlert = api.useCreateAlert();
   const updateAlert = api.useUpdateAlert();
@@ -350,7 +352,7 @@ export const DBSearchPageAlertModal = ({
     } catch (error) {
       notifications.show({
         color: 'red',
-        message: 'Something went wrong. Please contact HyperDX team.',
+        message: `Something went wrong. Please contact ${brandName} team.`,
         autoClose: 5000,
       });
     }
@@ -369,7 +371,7 @@ export const DBSearchPageAlertModal = ({
     } catch (error) {
       notifications.show({
         color: 'red',
-        message: 'Something went wrong. Please contact HyperDX team.',
+        message: `Something went wrong. Please contact ${brandName} team.`,
         autoClose: 5000,
       });
     }

packages/app/src/HDXMultiSeriesTableChart.tsx

@@ -18,6 +18,7 @@ import { useVirtualizer } from '@tanstack/react-virtual';
 import { CsvExportButton } from './components/CsvExportButton';
 import TableHeader from './components/DBTable/TableHeader';
 import { useCsvExport } from './hooks/useCsvExport';
+import { useBrandDisplayName } from './theme/ThemeProvider';
 import { UNDEFINED_WIDTH } from './tableUtils';
 import type { NumberFormat } from './types';
 import { formatNumber } from './utils';
@@ -51,6 +52,7 @@ export const Table = ({
   onSortingChange: (sorting: SortingState) => void;
   variant?: TableVariant;
 }) => {
+  const brandName = useBrandDisplayName();
   const MIN_COLUMN_WIDTH_PX = 100;
   //we need a reference to the scrolling element for logic down below
   const tableContainerRef = useRef<HTMLDivElement>(null);
@@ -254,7 +256,7 @@ export const Table = ({
                             </UnstyledButton>
                             <CsvExportButton
                               data={csvData}
-                              filename="HyperDX_table_results"
+                              filename={`${brandName}_table_results`}
                               className="fs-8 ms-2"
                               title="Download table as CSV"
                             >