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

## Summary

The ClickStack brand migration still left a few user-facing strings hardcoded as ClickStack or HyperDX. A downstream build that replaces `src/brand/` does not change them. These now go through `useBrandDisplayName` or `usePageTitle`. Doc URLs are unchanged.

- ClickHouse-build banner: "{brand} features…" and the "{brand} docs" link
- `/careers` title, and "Join us to build {brand} at ClickHouse"
- Raw SQL chart help: "{brand} documentation"
- Search syntax reference tooltip: "{brand} search documentation"

Package names, the HyperDX browser SDK, Terraform provider copy, and comments are left as they are.

### Screenshots or video

Not captured in this session. The table is left for a visual check.

| Before | After |
| :----- | :---- |
| Hardcoded ClickStack / HyperDX | Brand display name |

### How to reproduce

**Starting point:** [play.hyperdx.io](https://play.hyperdx.io), or `yarn app:dev:local` connected to the demo server. The ClickHouse-build banner only shows when `IS_CLICKHOUSE_BUILD` is set.

**On `main`:**

1. Open `/careers`. The document title is "Careers | HyperDX" and the intro says "build ClickStack".
2. Open Search, then the help icon labeled "Open syntax reference". The external-link tooltip says "ClickStack search documentation".
3. Open Chart Explorer on a raw SQL chart and expand "SQL Chart Instructions". The link says "ClickStack documentation".
4. In a ClickHouse build, the top banner says "lacking core ClickStack features" and links "ClickStack Docs".

**On this branch:**

1. Repeat the same steps. Each of those names is the brand display name (ClickStack in this repo).

### How to test on Vercel preview

**Preview routes:** /careers, /search, /chart

**Steps:**

1. Open /careers and confirm the intro says the brand name rather than a hardcoded "ClickStack", and the tab title is "Careers - {brand}".
2. Open /search, click the search help icon ("Open syntax reference"), and hover the external-link icon. Confirm the tooltip uses the brand name.
3. Open /chart, switch to a raw SQL chart, expand "SQL Chart Instructions", and confirm the documentation link uses the brand name.

### References

- Related PRs: #3545
- Linear Issue:


Made with [Cursor](https://cursor.com)

Author: elizabetdev

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>