From 004a50a4f578733c5e458756e871270a2f81a901 Mon Sep 17 00:00:00 2001
From: Michiel de Jong <michielbdejong@ontola.io>
Date: Thu, 24 Sep 2026 16:30:21 +0200
Subject: [PATCH 1/2] Say which integration proxy carries a connection's
 traffic

Self-hosted servers default to a hosted integration proxy (#1700), so
wherever someone connects an external service they should see where that
traffic goes and how to run their own proxy. A shared ProxyTrafficNotice
names the configured proxy's host ("atomic.place" for atomic.place and its
subdomains) and links to the atomic-integration-proxy self-hosting guide.
It appears in the app's "Connect an account" bar and under the proxy URL
field in Settings > Integration.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../src/chunks/AppPage/AppFrame.tsx           | 24 ++++++++---
 .../src/components/ProxyTrafficNotice.tsx     | 31 ++++++++++++++
 .../Settings/IntegrationSettings.tsx          |  2 +
 .../src/helpers/proxyTrafficHost.test.ts      | 42 +++++++++++++++++++
 .../src/helpers/proxyTrafficHost.ts           | 32 ++++++++++++++
 browser/data-browser/src/locales/de.po        | 11 +++--
 browser/data-browser/src/locales/en.po        | 15 ++++---
 browser/data-browser/src/locales/es.po        | 11 +++--
 browser/data-browser/src/locales/fr.po        | 11 +++--
 9 files changed, 159 insertions(+), 20 deletions(-)
 create mode 100644 browser/data-browser/src/components/ProxyTrafficNotice.tsx
 create mode 100644 browser/data-browser/src/helpers/proxyTrafficHost.test.ts
 create mode 100644 browser/data-browser/src/helpers/proxyTrafficHost.ts

diff --git a/browser/data-browser/src/chunks/AppPage/AppFrame.tsx b/browser/data-browser/src/chunks/AppPage/AppFrame.tsx
index ffee449358..b291a0943e 100644
--- a/browser/data-browser/src/chunks/AppPage/AppFrame.tsx
+++ b/browser/data-browser/src/chunks/AppPage/AppFrame.tsx
@@ -16,6 +16,7 @@ import resetCss from '../../reset.css?raw';
 import { useCreateThemeVars } from '@views/PluginView/useCreateThemeVars';
 import { getIntegrationProxy } from '@helpers/integrationProxy';
 import { isPlatformId, ProxyConnections } from '@helpers/proxyConnections';
+import { ProxyTrafficNotice } from '@components/ProxyTrafficNotice';
 
 /** Changing installation or destination must discard source tokens and pending replies. */
 export function AppFrame(props: Parameters<typeof AppFrameSession>[0]) {
@@ -334,12 +335,15 @@ function AppFrameSession({
       )}
       {connectAsk && (
         <ConnectBar role='group' aria-label='Connect an account'>
-          <ErrorText>
-            This app wants to connect your{' '}
-            <strong>{platformName(connectAsk.platform)}</strong> account through{' '}
-            {getIntegrationProxy()}. The connection stays in this browser; the
-            app can only make requests through it.
-          </ErrorText>
+          <ConnectText>
+            <ErrorText>
+              This app wants to connect your{' '}
+              <strong>{platformName(connectAsk.platform)}</strong> account. The
+              connection stays in this browser; the app can only make requests
+              through it.
+            </ErrorText>
+            <ProxyTrafficNotice />
+          </ConnectText>
           <Row gap='0.5rem'>
             <Button onClick={connect}>Connect</Button>
             <Button subtle onClick={cancelConnect}>
@@ -503,6 +507,14 @@ const ConnectBar = styled.div`
   margin-bottom: 0.5rem;
 `;
 
+const ConnectText = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  flex: 1 1 20rem;
+  min-width: 0;
+`;
+
 /** Keeps the frame filling whatever is left once the bar has taken its height. */
 const Wrapper = styled.div`
   display: flex;
diff --git a/browser/data-browser/src/components/ProxyTrafficNotice.tsx b/browser/data-browser/src/components/ProxyTrafficNotice.tsx
new file mode 100644
index 0000000000..b92a792705
--- /dev/null
+++ b/browser/data-browser/src/components/ProxyTrafficNotice.tsx
@@ -0,0 +1,31 @@
+import { styled } from 'styled-components';
+import { useIntegrationProxy } from '@helpers/integrationProxy';
+import {
+  PROXY_SELF_HOSTING_URL,
+  proxyTrafficHost,
+} from '@helpers/proxyTrafficHost';
+import { ExternalLink } from './ExternalLink';
+
+/**
+ * Says which integration proxy carries a connection's traffic, with a link to
+ * running your own. Shown wherever someone connects an external service, and
+ * next to the proxy setting.
+ */
+export function ProxyTrafficNotice(): React.JSX.Element {
+  const host = proxyTrafficHost(useIntegrationProxy());
+
+  return (
+    <Notice data-testid='proxy-traffic-notice'>
+      This traffic goes through <strong>{host}</strong>. If you want to run
+      your own atomic-integration-proxy, follow the instructions here:{' '}
+      <ExternalLink to={PROXY_SELF_HOSTING_URL}>self-hosting guide</ExternalLink>
+    </Notice>
+  );
+}
+
+const Notice = styled.span`
+  display: block;
+  font-size: 0.8rem;
+  color: ${p => p.theme.colors.textLight};
+  overflow-wrap: anywhere;
+`;
diff --git a/browser/data-browser/src/components/Settings/IntegrationSettings.tsx b/browser/data-browser/src/components/Settings/IntegrationSettings.tsx
index c64de41c2a..c7cb0c5db4 100644
--- a/browser/data-browser/src/components/Settings/IntegrationSettings.tsx
+++ b/browser/data-browser/src/components/Settings/IntegrationSettings.tsx
@@ -10,6 +10,7 @@ import {
 } from '@components/forms/InputStyles';
 import { Button } from '@components/Button';
 import { SettingsSection } from './SettingsSection';
+import { ProxyTrafficNotice } from '@components/ProxyTrafficNotice';
 import {
   defaultIntegrationProxy,
   setIntegrationProxy,
@@ -93,6 +94,7 @@ function ProxyForm({ proxy }: { proxy: string }) {
             aria-describedby={error ? 'integration-proxy-error' : undefined}
           />
         </InputWrapper>
+        <ProxyTrafficNotice />
         {error && (
           <ErrMessage id='integration-proxy-error' role='alert'>
             {error}
diff --git a/browser/data-browser/src/helpers/proxyTrafficHost.test.ts b/browser/data-browser/src/helpers/proxyTrafficHost.test.ts
new file mode 100644
index 0000000000..9dde124efe
--- /dev/null
+++ b/browser/data-browser/src/helpers/proxyTrafficHost.test.ts
@@ -0,0 +1,42 @@
+import { describe, expect, it } from 'vitest';
+import { proxyTrafficHost } from './proxyTrafficHost';
+
+describe('proxyTrafficHost', () => {
+  it('names atomic.place for the apex domain', () => {
+    expect(proxyTrafficHost('https://atomic.place')).toBe('atomic.place');
+  });
+
+  it('names atomic.place for any subdomain', () => {
+    expect(proxyTrafficHost('https://integrations.atomic.place')).toBe(
+      'atomic.place',
+    );
+    expect(proxyTrafficHost('https://a.b.atomic.place')).toBe('atomic.place');
+    expect(proxyTrafficHost('https://Integrations.Atomic.Place')).toBe(
+      'atomic.place',
+    );
+  });
+
+  it('does not mistake a lookalike for atomic.place', () => {
+    expect(proxyTrafficHost('https://evilatomic.place')).toBe(
+      'evilatomic.place',
+    );
+    expect(proxyTrafficHost('https://atomic.place.example.com')).toBe(
+      'atomic.place.example.com',
+    );
+  });
+
+  it('names any other host itself', () => {
+    expect(proxyTrafficHost('https://localthought.io')).toBe('localthought.io');
+    expect(proxyTrafficHost('https://proxy.example.org')).toBe(
+      'proxy.example.org',
+    );
+  });
+
+  it('keeps a port so a local proxy is identifiable', () => {
+    expect(proxyTrafficHost('http://localhost:8787')).toBe('localhost:8787');
+  });
+
+  it('returns the input when it is not a URL', () => {
+    expect(proxyTrafficHost('not a url')).toBe('not a url');
+  });
+});
diff --git a/browser/data-browser/src/helpers/proxyTrafficHost.ts b/browser/data-browser/src/helpers/proxyTrafficHost.ts
new file mode 100644
index 0000000000..cc04be9aad
--- /dev/null
+++ b/browser/data-browser/src/helpers/proxyTrafficHost.ts
@@ -0,0 +1,32 @@
+// @wc-ignore-file
+
+/** How to run your own integration proxy instead of the default one. */
+export const PROXY_SELF_HOSTING_URL =
+  'https://github.com/ontola/atomic-plugins/blob/main/integration-proxy/SELF_HOSTING.md';
+
+const ATOMIC_PLACE = 'atomic.place';
+
+/**
+ * The name to show for the integration proxy a connection's traffic goes
+ * through: `atomic.place` for atomic.place or any of its subdomains (so
+ * `integrations.atomic.place` reads as the service, not a machine), otherwise
+ * the proxy's own host, port included. Falls back to the input when it is not
+ * a URL, so a notice never hides where traffic goes.
+ */
+export function proxyTrafficHost(proxy: string): string {
+  let url: URL;
+
+  try {
+    url = new URL(proxy);
+  } catch {
+    return proxy;
+  }
+
+  const hostname = url.hostname.toLowerCase().replace(/\.$/, '');
+
+  if (hostname === ATOMIC_PLACE || hostname.endsWith(`.${ATOMIC_PLACE}`)) {
+    return ATOMIC_PLACE;
+  }
+
+  return url.host;
+}
diff --git a/browser/data-browser/src/locales/de.po b/browser/data-browser/src/locales/de.po
index 6175af1b39..e65cb6aa44 100644
--- a/browser/data-browser/src/locales/de.po
+++ b/browser/data-browser/src/locales/de.po
@@ -9416,11 +9416,16 @@ msgstr ""
 msgid "Sign in to connect an account."
 msgstr ""
 
-#. 0: ' '; 1: ' '; 2: getIntegrationProxy()
 #: src/chunks/AppPage/AppFrame.tsx
-msgid "This app wants to connect your{0} <0/> account through{1} {2}. The connection stays in this browser; the app can only make requests through it."
+msgid "Connect an account"
 msgstr ""
 
+#. 0: ' '
 #: src/chunks/AppPage/AppFrame.tsx
-msgid "Connect an account"
+msgid "This app wants to connect your{0} <0/> account. The connection stays in this browser; the app can only make requests through it."
+msgstr ""
+
+#. 0: ' '
+#: src/components/ProxyTrafficNotice.tsx
+msgid "This traffic goes through <0/>. If you want to run your own atomic-integration-proxy, follow the instructions here:{0} <1>self-hosting guide</1>"
 msgstr ""
diff --git a/browser/data-browser/src/locales/en.po b/browser/data-browser/src/locales/en.po
index 22960acfe1..3e6bf712d1 100644
--- a/browser/data-browser/src/locales/en.po
+++ b/browser/data-browser/src/locales/en.po
@@ -9434,11 +9434,16 @@ msgstr "Finishing the connection…"
 msgid "Sign in to connect an account."
 msgstr "Sign in to connect an account."
 
-#. 0: ' '; 1: ' '; 2: getIntegrationProxy()
-#: src/chunks/AppPage/AppFrame.tsx
-msgid "This app wants to connect your{0} <0/> account through{1} {2}. The connection stays in this browser; the app can only make requests through it."
-msgstr "This app wants to connect your{0} <0/> account through{1} {2}. The connection stays in this browser; the app can only make requests through it."
-
 #: src/chunks/AppPage/AppFrame.tsx
 msgid "Connect an account"
 msgstr "Connect an account"
+
+#. 0: ' '
+#: src/chunks/AppPage/AppFrame.tsx
+msgid "This app wants to connect your{0} <0/> account. The connection stays in this browser; the app can only make requests through it."
+msgstr "This app wants to connect your{0} <0/> account. The connection stays in this browser; the app can only make requests through it."
+
+#. 0: ' '
+#: src/components/ProxyTrafficNotice.tsx
+msgid "This traffic goes through <0/>. If you want to run your own atomic-integration-proxy, follow the instructions here:{0} <1>self-hosting guide</1>"
+msgstr "This traffic goes through <0/>. If you want to run your own atomic-integration-proxy, follow the instructions here:{0} <1>self-hosting guide</1>"
diff --git a/browser/data-browser/src/locales/es.po b/browser/data-browser/src/locales/es.po
index 58f207142a..451da67b26 100644
--- a/browser/data-browser/src/locales/es.po
+++ b/browser/data-browser/src/locales/es.po
@@ -9416,11 +9416,16 @@ msgstr ""
 msgid "Sign in to connect an account."
 msgstr ""
 
-#. 0: ' '; 1: ' '; 2: getIntegrationProxy()
 #: src/chunks/AppPage/AppFrame.tsx
-msgid "This app wants to connect your{0} <0/> account through{1} {2}. The connection stays in this browser; the app can only make requests through it."
+msgid "Connect an account"
 msgstr ""
 
+#. 0: ' '
 #: src/chunks/AppPage/AppFrame.tsx
-msgid "Connect an account"
+msgid "This app wants to connect your{0} <0/> account. The connection stays in this browser; the app can only make requests through it."
+msgstr ""
+
+#. 0: ' '
+#: src/components/ProxyTrafficNotice.tsx
+msgid "This traffic goes through <0/>. If you want to run your own atomic-integration-proxy, follow the instructions here:{0} <1>self-hosting guide</1>"
 msgstr ""
diff --git a/browser/data-browser/src/locales/fr.po b/browser/data-browser/src/locales/fr.po
index b43fb625f4..5944f9df91 100644
--- a/browser/data-browser/src/locales/fr.po
+++ b/browser/data-browser/src/locales/fr.po
@@ -9416,11 +9416,16 @@ msgstr ""
 msgid "Sign in to connect an account."
 msgstr ""
 
-#. 0: ' '; 1: ' '; 2: getIntegrationProxy()
 #: src/chunks/AppPage/AppFrame.tsx
-msgid "This app wants to connect your{0} <0/> account through{1} {2}. The connection stays in this browser; the app can only make requests through it."
+msgid "Connect an account"
 msgstr ""
 
+#. 0: ' '
 #: src/chunks/AppPage/AppFrame.tsx
-msgid "Connect an account"
+msgid "This app wants to connect your{0} <0/> account. The connection stays in this browser; the app can only make requests through it."
+msgstr ""
+
+#. 0: ' '
+#: src/components/ProxyTrafficNotice.tsx
+msgid "This traffic goes through <0/>. If you want to run your own atomic-integration-proxy, follow the instructions here:{0} <1>self-hosting guide</1>"
 msgstr ""

From 084fe3015d6f945b06dbd8d2a1c09c84514b9447 Mon Sep 17 00:00:00 2001
From: Michiel de Jong <michielbdejong@ontola.io>
Date: Fri, 25 Sep 2026 10:31:06 +0200
Subject: [PATCH 2/2] Format ProxyTrafficNotice.tsx with oxfmt

The pre-commit format check was skipped when this branch was committed
with --no-verify.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../data-browser/src/components/ProxyTrafficNotice.tsx    | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/browser/data-browser/src/components/ProxyTrafficNotice.tsx b/browser/data-browser/src/components/ProxyTrafficNotice.tsx
index b92a792705..04d50d6244 100644
--- a/browser/data-browser/src/components/ProxyTrafficNotice.tsx
+++ b/browser/data-browser/src/components/ProxyTrafficNotice.tsx
@@ -16,9 +16,11 @@ export function ProxyTrafficNotice(): React.JSX.Element {
 
   return (
     <Notice data-testid='proxy-traffic-notice'>
-      This traffic goes through <strong>{host}</strong>. If you want to run
-      your own atomic-integration-proxy, follow the instructions here:{' '}
-      <ExternalLink to={PROXY_SELF_HOSTING_URL}>self-hosting guide</ExternalLink>
+      This traffic goes through <strong>{host}</strong>. If you want to run your
+      own atomic-integration-proxy, follow the instructions here:{' '}
+      <ExternalLink to={PROXY_SELF_HOSTING_URL}>
+        self-hosting guide
+      </ExternalLink>
     </Notice>
   );
 }