refactor(mcp): guide agents through creating clean rundowns

apps/client/src/features/app-settings/panel/settings-panel/McpSection.tsx

@@ -2,33 +2,23 @@ import { useEffect, useState } from 'react';
 
 import { generateUrl } from '../../../../common/api/session';
 import CopyTag from '../../../../common/components/copy-tag/CopyTag';
-import useInfo from '../../../../common/hooks-query/useInfo';
-import { isOntimeCloud, serverURL } from '../../../../externals';
+import { serverURL } from '../../../../externals';
 import * as Panel from '../../panel-utils/PanelUtils';
 
 export default function McpSection() {
-  const { data: infoData } = useInfo();
   const [mcpEndpointUrl, setMcpEndpointUrl] = useState('');
 
   // generate url
   useEffect(() => {
-    const baseUrl = (() => {
-      if (isOntimeCloud) return serverURL;
-
-      // for local setups we prefer the localhost IP to avoid remote access
-      if (infoData.networkInterfaces.length > 0) {
-        return `http://${infoData.networkInterfaces[0].address}:${infoData.serverPort}`;
-      }
-      return serverURL;
-    })();
-
+    // the page origin is reachable wherever the user is browsing from,
+    // and follows the deployment (cloud, reverse proxy, port mappings)
     // we are reusing the endpoint, so locking config and nav have no effect
-    generateUrl({ baseUrl, path: 'mcp', authenticate: true, lockConfig: false, lockNav: false })
+    generateUrl({ baseUrl: serverURL, path: 'mcp', authenticate: true, lockConfig: false, lockNav: false })
       .then(setMcpEndpointUrl)
       .catch(() => {
         setMcpEndpointUrl('');
       });
-  }, [infoData]);
+  }, []);
 
   const mcpClientConfig = mcpEndpointUrl
     ? JSON.stringify({ mcpServers: { ontime: { url: mcpEndpointUrl } } }, null, 2)
@@ -40,14 +30,19 @@ export default function McpSection() {
         <Panel.SubHeader>MCP Server</Panel.SubHeader>
         <Panel.Paragraph>Connect any MCP-compatible AI agent to Ontime using the endpoint below.</Panel.Paragraph>
         <Panel.Divider />
-        <Panel.Field title='Endpoint URL' description='Add this URL to your MCP client settings' />
-        {mcpEndpointUrl && <CopyTag copyValue={mcpEndpointUrl}>{mcpEndpointUrl}</CopyTag>}
-        <Panel.Divider />
-        <Panel.Field
-          title='Client configuration snippet'
-          description='Paste this into your AI agent settings under "mcpServers"'
-        />
-        {mcpEndpointUrl && <CopyTag copyValue={mcpClientConfig}>{mcpClientConfig}</CopyTag>}
+        <Panel.ListGroup>
+          <Panel.ListItem>
+            <Panel.Field title='Endpoint URL' description='Add this URL to your MCP client settings' />
+            {mcpEndpointUrl && <CopyTag copyValue={mcpEndpointUrl}>{mcpEndpointUrl}</CopyTag>}
+          </Panel.ListItem>
+          <Panel.ListItem>
+            <Panel.Field
+              title='Client configuration snippet'
+              description='Paste this into your AI agent settings under "mcpServers"'
+            />
+            {mcpEndpointUrl && <CopyTag copyValue={mcpClientConfig}>{mcpClientConfig}</CopyTag>}
+          </Panel.ListItem>
+        </Panel.ListGroup>
       </Panel.Card>
     </Panel.Section>
   );

apps/client/src/features/sharing/GenerateLinkFormExport.tsx

@@ -3,6 +3,7 @@ import { useMemo } from 'react';
 
 import useInfo from '../../common/hooks-query/useInfo';
 import useUrlPresets from '../../common/hooks-query/useUrlPresets';
+import { hostToBaseUrl } from '../../common/utils/linkUtils';
 import GenerateLinkForm from './GenerateLinkForm';
 
 interface GenerateLinkFormExportProps {
@@ -21,7 +22,7 @@ export default function GenerateLinkFormExport({ lockedPath }: GenerateLinkFormE
    */
   const hostOptions = useMemo(() => {
     return infoData.networkInterfaces.map((nif) => ({
-      value: `http://${nif.address}:${infoData.serverPort}`,
+      value: hostToBaseUrl(nif.address, infoData.serverPort),
       label: `${nif.name} - ${nif.address}`,
     }));
   }, [infoData.networkInterfaces, infoData.serverPort]);