Harden operator environment links

frontend/src/App.tsx

@@ -404,6 +404,7 @@ export function App() {
         readProductEnvironmentConfigStatus(
           selectedProductOverview.product,
           environment.environment,
+          controller.signal,
         ).then((payload) => payload.config_status),
       ),
     )

frontend/src/ProductOverviewShell.tsx

@@ -144,18 +144,21 @@ function EnvironmentDetailStrip({
   const blockedActions = environment.available_actions.filter(
     (action) => !action.enabled,
   );
+  const baseUrl = safeExternalHttpUrl(environment.base_url);
   return (
     <div className="environment-detail-strip" data-environment={environment.environment}>
       <div className="environment-detail-identity">
         <span className={`lane-chip lane-chip-${environment.environment}`}>
           {environment.environment}
         </span>
         <code>{environment.context}</code>
-        {environment.base_url ? (
-          <a href={environment.base_url} target="_blank" rel="noreferrer">
+        {baseUrl ? (
+          <a href={baseUrl.href} target="_blank" rel="noreferrer">
             <ExternalLink size={13} aria-hidden="true" />
             {environment.base_url}
           </a>
+        ) : environment.base_url ? (
+          <code>{environment.base_url}</code>
         ) : null}
       </div>
       <div className="environment-detail-facts">
@@ -193,3 +196,16 @@ function EnvironmentDetailStrip({
     </div>
   );
 }
+
+function safeExternalHttpUrl(value: string): URL | null {
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return null;
+  }
+  try {
+    const url = new URL(trimmed);
+    return url.protocol === "http:" || url.protocol === "https:" ? url : null;
+  } catch {
+    return null;
+  }
+}

frontend/src/api.ts

@@ -35,6 +35,7 @@ async function requestJson<T>(
   path: string,
   method: "GET" | "POST" = "GET",
   body?: unknown,
+  signal?: AbortSignal,
 ): Promise<T> {
   const headers: HeadersInit = {
     Accept: "application/json",
@@ -47,6 +48,7 @@ async function requestJson<T>(
     credentials: "same-origin",
     headers,
     body: body === undefined ? undefined : JSON.stringify(body),
+    signal,
   });
   const payload = (await response.json()) as T | ApiErrorPayload;
   if (!response.ok) {
@@ -102,9 +104,13 @@ export function listProducts(): Promise<ProductListPayload> {
 export function readProductEnvironmentConfigStatus(
   product: string,
   environment: string,
+  signal?: AbortSignal,
 ): Promise<ProductEnvironmentConfigStatusPayload> {
   return requestJson<ProductEnvironmentConfigStatusPayload>(
     `/v1/products/${encodeURIComponent(product)}/environments/${encodeURIComponent(environment)}/config-status`,
+    "GET",
+    undefined,
+    signal,
   );
 }