Fix host mode routing without trailing slash (#4915)

Author: backspace

packages/host/app/services/host-mode-service.ts

@@ -19,6 +19,16 @@ function ensureSingleTitle(headHTML: string): string {
     ? headHTML
     : `${DEFAULT_HEAD_HTML}\n${headHTML}`;
 }
+
+// Normalize trailing-slash variance for routing-map matching. `/realm/`
+// and `/realm` are the same destination from the user's perspective,
+// but the injected map keys and Ember's `params.path` disagree on
+// the trailing slash. Stripping it on both sides makes the comparator
+// robust. Preserve the root `/` since stripping it would empty the path.
+function canonicalizeRoutingPath(path: string): string {
+  if (path === '/') return '/';
+  return path.replace(/\/+$/, '');
+}
 import type HostModeStateService from '@cardstack/host/services/host-mode-state-service';
 import type OperatorModeStateService from '@cardstack/host/services/operator-mode-state-service';
 import type RealmService from '@cardstack/host/services/realm';
@@ -130,10 +140,19 @@ export default class HostModeService extends Service {
   // `https://host/<user>/<realm>/whitepaper`); a leading slash is added if
   // absent so the index path is matchable as either '' or '/'. The
   // server prefixes each rule's `path` with the realm's mount pathname
-  // before injecting the map, so the two sides line up as direct equality.
+  // before injecting the map, so the two sides line up as direct equality
+  // — except for the trailing-slash variance at the realm root. A `/`
+  // rule's injected key is the realm's mount pathname WITH trailing
+  // slash (e.g. `/progressive-cheetah/`), but Ember's catch-all strips
+  // it (`params.path === 'progressive-cheetah'` for either visit form).
+  // Canonicalize both sides by stripping trailing slashes (except the
+  // root `/` itself) before comparing so `/realm` ↔ `/realm/` resolve.
   resolveRoutedPath(path: string): string | null {
     let normalized = path.startsWith('/') ? path : `/${path}`;
-    let rule = this.hostRoutingMap.find((r) => r.path === normalized);
+    let canonical = canonicalizeRoutingPath(normalized);
+    let rule = this.hostRoutingMap.find(
+      (r) => canonicalizeRoutingPath(r.path) === canonical,
+    );
     return rule ? rule.id : null;
   }
 

packages/matrix/tests/host-mode.spec.ts

@@ -436,4 +436,112 @@ test.describe('Host mode', () => {
     await page.goto(routedURL);
     await expect(page.locator('[data-test-white-paper]')).toBeVisible();
   });
+
+  test('routing rule for `/` resolves when realm root is visited without a trailing slash', async ({
+    page,
+  }) => {
+    // The realm publishes at e.g. `https://published.localhost:4205/<user>/<realm>/`
+    // (with trailing slash). When a visitor types the URL without the
+    // trailing slash, the server-rendered HTML is correct (the SSR
+    // path-in-realm computation handles the missing slash), but the
+    // Ember SPA's catch-all `/*path` strips the trailing slash from
+    // the URL on the client side. Without canonicalization the
+    // injected map key `/<user>/<realm>/` for the `/` rule wouldn't
+    // match the client's `params.path === '<user>/<realm>'`, and
+    // hydration would replace the SSR'd card with the bare-shell
+    // fallback. This test pins the canonicalized comparator.
+    await login(page, username, password);
+    await page.goto(realmURL);
+    await page.locator('[data-test-stack-item-content]').first().waitFor();
+
+    await postCardSource(
+      page,
+      realmURL,
+      'realm.json',
+      JSON.stringify({
+        data: {
+          type: 'card',
+          attributes: {
+            cardInfo: { name: `Routed Realm ${randomUUID()}` },
+            hostRoutingRules: [{ path: '/' }],
+          },
+          relationships: {
+            'hostRoutingRules.0.instance': {
+              links: { self: './white-paper' },
+            },
+          },
+          meta: {
+            adoptsFrom: {
+              module: 'https://cardstack.com/base/realm-config',
+              name: 'RealmConfig',
+            },
+          },
+        },
+      }),
+    );
+
+    await page.evaluate(
+      async ({ realmURL, publishedRealmURL }) => {
+        let sessions = JSON.parse(
+          window.localStorage.getItem('boxel-session') ?? '{}',
+        );
+        let token = sessions[realmURL];
+        if (!token) {
+          throw new Error(`No session token found for ${realmURL}`);
+        }
+        let response = await fetch('https://localhost:4205/_publish-realm', {
+          method: 'POST',
+          headers: {
+            Accept: 'application/json',
+            'Content-Type': 'application/json',
+            Authorization: token,
+          },
+          body: JSON.stringify({
+            sourceRealmURL: realmURL,
+            publishedRealmURL,
+          }),
+        });
+        if (!response.ok) {
+          throw new Error(await response.text());
+        }
+      },
+      { realmURL, publishedRealmURL },
+    );
+
+    await logout(page);
+
+    // Wait until the SSR HTML at the canonical (trailing-slash) URL
+    // contains the routed card's marker, then navigate to the
+    // NO-TRAILING-SLASH variant and assert the marker stays visible
+    // through hydration. The no-slash navigation is what the
+    // canonicalization fix targets.
+    await waitUntil(async () => {
+      let response = await page.request.get(publishedRealmURL, {
+        headers: { Accept: 'text/html' },
+      });
+      if (!response.ok()) {
+        return false;
+      }
+      let text = await response.text();
+      return text.includes('data-test-white-paper');
+    });
+
+    let noSlashURL = publishedRealmURL.replace(/\/$/, '');
+    await page.goto(noSlashURL);
+    // `[data-test-host-mode-card="<id>"]` is set by the host SPA's
+    // CardRenderer — that attribute exists ONLY post-hydration (it's
+    // not in the SSR'd isolated_html). Pinning it to the rule's target
+    // id means:
+    //   (a) `toBeVisible` implicitly waits for hydration to finish,
+    //       so it can't pass on the brief SSR flash before the SPA
+    //       replaces it; and
+    //   (b) if the resolveRoutedPath miss makes the SPA fall back to
+    //       the realm index card, the attribute value is `…/index`
+    //       (or similar) and this assertion fails with a clear diff
+    //       instead of silently catching the SSR'd marker.
+    let expectedRoutedCardId = `${publishedRealmURL}white-paper`;
+    await expect(
+      page.locator(`[data-test-host-mode-card="${expectedRoutedCardId}"]`),
+    ).toBeVisible();
+  });
 });