fix(app): read leftover product names from the brand hook

packages/app/src/CareersPage.tsx

@@ -13,7 +13,8 @@ import {
 } from '@mantine/core';
 import { useQuery } from '@tanstack/react-query';
 
-import { INSTANCE_TITLE_SUFFIX } from '@/config';
+import { useBrandDisplayName, usePageTitle } from '@/brand';
+
 interface GreenhouseJob {
   id: number;
   title: string;
@@ -81,6 +82,8 @@ function useGreenhouseJobs() {
 }
 
 export default function CareersPage() {
+  const brandName = useBrandDisplayName();
+  const title = usePageTitle('Careers');
   const { data: commitsData, isLoading: commitsLoading } = useRecentCommits();
   const { data, isLoading, isError } = useGreenhouseJobs();
 
@@ -92,14 +95,14 @@ export default function CareersPage() {
   return (
     <Container size="md" py="xl">
       <Head>
-        <title>{`Careers | HyperDX${INSTANCE_TITLE_SUFFIX}`}</title>
+        <title>{title}</title>
       </Head>
       <Stack gap="lg">
         <Title order={1}>
           ClickHouse Careers: Help Build the Future of Observability
         </Title>
         <Text c="dimmed">
-          Join us to build ClickStack at ClickHouse, scaling a high performance
+          Join us to build {brandName} at ClickHouse, scaling a high performance
           observability platform that ingests and queries petabytes of telemetry
           across metrics, logs, and traces.
           <br />

packages/app/src/components/ChartEditor/RawSqlChartInstructions.tsx

@@ -19,6 +19,7 @@ import {
   IconCopy,
 } from '@tabler/icons-react';
 
+import { useBrandDisplayName } from '@/brand';
 import { useLocalStorage } from '@/utils';
 
 import { DISPLAY_TYPE_INSTRUCTIONS } from './constants';
@@ -33,6 +34,7 @@ export function RawSqlChartInstructions({
   displayType: DisplayType;
   variables?: ChartVariable[];
 }) {
+  const brandName = useBrandDisplayName();
   const [helpOpened, setHelpOpened] = useLocalStorage<boolean>(
     HELP_OPENED_KEY,
     true,
@@ -79,7 +81,7 @@ export function RawSqlChartInstructions({
                 href="https://clickhouse.com/docs/use-cases/observability/clickstack/dashboards/sql-visualizations"
                 target="_blank"
               >
-                ClickStack documentation
+                {brandName} documentation
               </Anchor>{' '}
               for an exhaustive list.
             </Text>

packages/app/src/components/SearchInput/SyntaxReferenceModal.tsx

@@ -16,6 +16,8 @@ import {
 } from '@mantine/core';
 import { IconExternalLink, IconSearch } from '@tabler/icons-react';
 
+import { useBrandDisplayName } from '@/brand';
+
 type Language = 'sql' | 'lucene';
 
 type Row = { expr: string; desc: string };
@@ -292,6 +294,7 @@ export default function SyntaxReferenceModal({
   onClose: () => void;
   language: Language;
 }) {
+  const brandName = useBrandDisplayName();
   const [language, setLanguage] = useState<Language>(initialLanguage);
   const [query, setQuery] = useState('');
 
@@ -336,7 +339,7 @@ export default function SyntaxReferenceModal({
             size="xs"
             style={{ flex: 1 }}
           />
-          <Tooltip label="ClickStack search documentation" withArrow>
+          <Tooltip label={`${brandName} search documentation`} withArrow>
             <Text
               size="xs"
               c="dimmed"

packages/app/src/layout.tsx

@@ -5,6 +5,7 @@ import type { QuerySurface } from '@hyperdx/common-utils/dist/clickhouse';
 import { Button, Center, Group, Text } from '@mantine/core';
 import { IconX } from '@tabler/icons-react';
 
+import { useBrandDisplayName } from '@/brand';
 import AppNav from '@/components/AppNav';
 import { IS_CLICKHOUSE_BUILD } from '@/config';
 import { QueryAttributionProvider } from '@/queryAttribution';
@@ -30,6 +31,7 @@ export const APP_CONTENT_SCROLL_CONTAINER_ID = 'app-content-scroll-container';
  */
 function PageWrapper({ children }: { children: React.ReactNode }) {
   const router = useRouter();
+  const brandName = useBrandDisplayName();
   const [bannerState, setBannerState] = useLocalStorage(
     'clickstack-banner-state',
     'opened',
@@ -58,16 +60,16 @@ function PageWrapper({ children }: { children: React.ReactNode }) {
         <Group bg="var(--color-text-primary)">
           <Center style={{ flexGrow: 1 }}>
             <Text py="xs" size="sm" c="var(--color-text-inverted)">
-              This is not recommended for production use and is lacking core
-              ClickStack features such as alerts and saved searches. For a
+              This is not recommended for production use and is lacking core{' '}
+              {brandName} features such as alerts and saved searches. For a
               proper experience, visit the{' '}
               <strong>
                 <Link
                   href="https://clickhouse.com/docs/use-cases/observability/clickstack/getting-started"
                   target="_blank"
                   rel="noopener noreferrer"
                 >
-                  ClickStack Docs
+                  {brandName} docs
                 </Link>
               </strong>
             </Text>