fix(infrastructure): make development previews reachable from the local portal

Local kind serves the apps Gateway on a forwarded port (10443), but the
synthesized status.url implied 443 and the hub CSP still allowed only the
deleted preview-gateway origin — so the portal preview iframe pointed at a
dead port AND was blocked from framing.

- New ${kedge.appPublicPort} token (KEDGE_APP_PUBLIC_PORT, ":<port>" suffix,
  empty in prod): application template appends it to status.url/redirectURL.
- Tiltfile.cluster: hub portalFrameSources now allows the local apps domain
  (https://*.apps.127.0.0.1.sslip.io:10443) instead of the dead
  *.preview.localhost origin; infra provider gets KEDGE_APP_PUBLIC_PORT.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: mjudeikis

Tiltfile.cluster

@@ -422,7 +422,10 @@ k8s_yaml(helm(
         # /bonkers admin access for the dev static token (resolves to
         # static-dev-toke@kedge.local — see proxy.ensureStaticTokenUserOnce).
         'hub.adminUsers={static-dev-toke@kedge.local}',
-        'hub.portalFrameSources={https://*.%s:%s}' % (app_studio_preview_base_domain, app_studio_preview_public_port),
+        # Development previews render the app's own exposure URL (status.url)
+        # in the portal iframe — allow the local apps domain on the envoy
+        # port-forward. (preview.localhost was the deleted preview-gateway.)
+        'hub.portalFrameSources={https://*.%s:%s}' % (app_base_domain, app_studio_preview_public_port),
         # Make *.kcp.localhost resolve to the Envoy gateway from the hub pod,
         # so the operator-issued kubeconfigs work in-cluster unchanged.
         'hostAliases[0].ip=%s' % gateway_ip,
@@ -824,10 +827,15 @@ local_resource(
                # cloudflare-tunnel (the in-binary default).
                'KEDGE_GATEWAY_NAME={gateway} ' +
                'KEDGE_GATEWAY_NAMESPACE=envoy-gateway-system ' +
+               # Locally the Gateway is only reachable via the envoy
+               # port-forward — templates append this to status.url
+               # (${kedge.appPublicPort}); prod leaves it unset (443).
+               'KEDGE_APP_PUBLIC_PORT={port} ' +
                'make run-provider-infrastructure').format(
                    kro=KIND_HOST_KUBECONFIG, kc=KCP_ADMIN_KUBECONFIG,
                    apps_domain=app_base_domain,
-                   gateway=app_studio_preview_parent_gateway_name),
+                   gateway=app_studio_preview_parent_gateway_name,
+                   port=app_studio_preview_public_port),
     deps=[
         'providers/infrastructure/main.go',
         'providers/infrastructure/heartbeat.go',

providers/infrastructure/backend/kro/backend.go

@@ -88,6 +88,10 @@ const (
 //   - KEDGE_GATEWAY_NAME / KEDGE_GATEWAY_NAMESPACE — the exposure-layer Gateway
 //     parent every template's HTTPRoutes (apps AND sandbox previews) attach to
 //     (defaults "cloudflare-tunnel" / "cfgate-system").
+//   - KEDGE_APP_PUBLIC_PORT — bare port number appended (as ":<port>") to
+//     synthesized exposure URLs via ${kedge.appPublicPort}. Unset in
+//     production (443 implied); local kind sets 10443 (the envoy
+//     port-forward).
 //
 // Per-instance inputs (container images, etc.) are NOT env tokens — templates
 // declare them as schema fields with sane defaults (e.g. simple-webapp's
@@ -102,9 +106,14 @@ func New(runtime dynamic.Interface) *Backend {
 	if gatewayNamespace == "" {
 		gatewayNamespace = DefaultGatewayNamespace
 	}
+	appPublicPort := ""
+	if port := strings.TrimSpace(os.Getenv("KEDGE_APP_PUBLIC_PORT")); port != "" {
+		appPublicPort = ":" + port
+	}
 	tokens := map[string]string{
 		gatewayNameToken:      gatewayName,
 		gatewayNamespaceToken: gatewayNamespace,
+		appPublicPortToken:    appPublicPort,
 	}
 	maps.Copy(tokens, devImageTokens())
 	return &Backend{runtime: runtime, tokens: tokens}

providers/infrastructure/backend/kro/backend_test.go

@@ -163,6 +163,25 @@ func TestSubstituteTokensLeavesKroRefs(t *testing.T) {
 	}
 }
 
+func TestSubstituteTokensAppPublicPort(t *testing.T) {
+	// The status.url CEL embeds the token inside a quoted CEL string; both
+	// values must yield a valid expression.
+	in := []byte(`{"url":"${\"https://\" + httpRoute.spec.hostnames[0] + \"${kedge.appPublicPort}\"}"}`)
+
+	// Local kind: KEDGE_APP_PUBLIC_PORT=10443 → ":10443" suffix.
+	out := string(substituteTokens(in, map[string]string{appPublicPortToken: ":10443"}))
+	if want := `{"url":"${\"https://\" + httpRoute.spec.hostnames[0] + \":10443\"}"}`; out != want {
+		t.Errorf("with port: substituteTokens = %s, want %s", out, want)
+	}
+
+	// Production (token unset in the caller's map): the placeholder must not
+	// leak — it resolves to the empty string.
+	out = string(substituteTokens(in, map[string]string{}))
+	if want := `{"url":"${\"https://\" + httpRoute.spec.hostnames[0] + \"\"}"}`; out != want {
+		t.Errorf("without port: substituteTokens = %s, want %s", out, want)
+	}
+}
+
 // testTokens is the platform-config token map the backend builds from env (the
 // exposure-layer Gateway parent + the dev-overlay images), for buildRGD tests.
 func testTokens() map[string]string {

providers/infrastructure/backend/kro/rgd.go

@@ -41,6 +41,13 @@ const (
 	// kedge-dev-agent binary every dev-mode component runs
 	// (KEDGE_DEV_AGENT_IMAGE).
 	devAgentImageToken = "${kedge.devAgentImage}"
+
+	// appPublicPortToken is the ":<port>" suffix templates append to
+	// synthesized exposure URLs (status.url). Empty in production — the
+	// Gateway serves on 443 and the URL implies it — and ":10443" style when
+	// the Gateway is only reachable on a forwarded port (local kind).
+	// Resolved from KEDGE_APP_PUBLIC_PORT (the bare port number).
+	appPublicPortToken = "${kedge.appPublicPort}"
 )
 
 const (
@@ -170,6 +177,12 @@ func substituteTokens(raw []byte, tokens map[string]string) []byte {
 	if resolved[gatewayNamespaceToken] == "" {
 		resolved[gatewayNamespaceToken] = DefaultGatewayNamespace
 	}
+	// Unlike the tokens above, empty is the CORRECT production value here
+	// (no port suffix). Force the key so the placeholder never leaks into
+	// the RGD when a caller's token map omits it.
+	if _, ok := resolved[appPublicPortToken]; !ok {
+		resolved[appPublicPortToken] = ""
+	}
 	for token, value := range resolved {
 		raw = bytes.ReplaceAll(raw, []byte(token), []byte(value))
 	}

providers/infrastructure/docs/template-conventions.md

@@ -17,7 +17,7 @@ invalid field into a materialized resource.
 |---|---|---|
 | **Per-instance, configurable** (image, version, size, replicas) | `spec.schema` field **with a `default`**; the resource references `${schema.spec.<field>}` | `simple-webapp.spec.image` (`default: "nginx:latest"`); `postgres-database.spec.version` |
 | **Fixed sidecar / tooling image** (not user-facing) | **hardcoded literal** in the resource | the control-token `bitnami/kubectl` job (database, redis, application); `quay.io/oauth2-proxy/oauth2-proxy:v7.6.0` |
-| **Platform-global, no universal default** | a reserved `${kedge.*}` substitution token, resolved by the kro backend from env | the exposure Gateway parent: `${kedge.gatewayName}` / `${kedge.gatewayNamespace}` (the **only** tokens that exist) |
+| **Platform-global, no universal default** | a reserved `${kedge.*}` substitution token, resolved by the kro backend from env | the exposure Gateway parent `${kedge.gatewayName}` / `${kedge.gatewayNamespace}`; the dev-overlay images `${kedge.devImage.<toolchain>}` / `${kedge.devAgentImage}`; the exposure-URL port suffix `${kedge.appPublicPort}` (empty in prod, `:10443` on local kind) |
 
 ## Why not `${kedge.*}` env tokens for images?
 

providers/infrastructure/install/templates/application.yaml

@@ -849,10 +849,14 @@ spec:
     # The HTTPRoute is always created (only its backend changes by mode).
     # Per-tier readiness lets the portal show progress. No secret values are
     # surfaced.
+    # ${kedge.appPublicPort} is substituted by the kro backend BEFORE kro sees
+    # this CEL: "" in production (443 implied), ":<port>" when the Gateway is
+    # only reachable on a forwarded port (local kind). The empty case leaves a
+    # harmless `+ ""` in the expression.
     status:
-      url: ${"https://" + httpRoute.spec.hostnames[0]}
+      url: ${"https://" + httpRoute.spec.hostnames[0] + "${kedge.appPublicPort}"}
       host: ${httpRoute.spec.hostnames[0]}
-      redirectURL: ${"https://" + httpRoute.spec.hostnames[0] + "/oauth2/callback"}
+      redirectURL: ${"https://" + httpRoute.spec.hostnames[0] + "${kedge.appPublicPort}" + "/oauth2/callback"}
       frontendReady: ${frontendDeployment.status.readyReplicas}
       backendReady: ${backendDeployment.status.readyReplicas}
       databaseReady: ${dbStatefulSet.status.readyReplicas}