fix(host): the bare host opens the product its path names (#387)

Author: johnthecat

apps/host/README.md

@@ -5,7 +5,9 @@ by `.dot` name inside a sandbox iframe. See the root [README](../../README.md) f
 
 ## Responsibility
 
-- Route a page load to a product, a local or preview target, or the landing page.
+- Route a page load to a product, a local or preview target, or the landing page. A product is named by its host
+  (`<label>.<domain>`) or, on the bare host, by the first path segment (`<domain>/<label>`), and gets only the path
+  after it.
 - Take a `.dot` label to a product on screen, or to the screen that says why not.
 - Own the page chrome: topbar, URL pill, loading screen, settings, account, permissions and network views.
 - Own the domain building blocks the chrome composes: account, chat, permission, appearance and chain views and their
@@ -95,7 +97,7 @@ flowchart LR
 ## Entry points
 
 - The shell page. Dev server on port 4321.
-- The landing page, served for the bare host.
+- The landing page, served for the bare host's root.
 - `npm run dev`, `build`, `build:prod`, `typecheck`, `lint`.
 - `npm test`: unit specs. `test:functional`, `test:e2e`, `test:e2e:local` and `test:perf*` run Playwright suites. A
   local functional run needs `VITE_METRICS=true` in both the build and the run.

apps/host/src/main.ts

@@ -199,7 +199,7 @@ async function openLocalTarget(target: LocalTarget, shell: Shell): Promise<void>
   }
 }
 
-async function openProduct(label: string, shell: Shell): Promise<void> {
+async function openProduct({ label, base }: Extract<ShellRoute, { kind: 'product' }>, shell: Shell): Promise<void> {
   const { settings, bridgeModule } = shell.startup;
   const protocol = protocolClient();
   boot.step = 'resolve_setup';
@@ -221,6 +221,7 @@ async function openProduct(label: string, shell: Shell): Promise<void> {
     flowId: shell.flowId,
     startedAt: T0,
     names,
+    base,
     frame: {
       setPageProduct: bridgeModule.setPageProduct,
       render: product => shell.productFrame.render(product),
@@ -323,7 +324,7 @@ async function main(): Promise<void> {
       return;
     case 'product':
       announceRoute(route, shell.flowId);
-      await openProduct(route.label, shell);
+      await openProduct(route, shell);
       return;
     case 'landing':
       announceRoute(route, shell.flowId);

apps/host/src/product-loader.ts

@@ -70,6 +70,8 @@ export interface ProductLoaderOptions {
   startedAt: number;
   names: NameSource;
   frame: LoaderFrame;
+  /** The page path ahead of the product's own, which its frame does not get. */
+  base?: string | undefined;
   cidCache: LoaderCidCache;
   /** The names this visitor opened, kept in the store every subdomain shares. */
   recents: Pick<RecentLabels, 'record'>;
@@ -182,7 +184,7 @@ async function loadProduct(label: string, options: ProductLoaderOptions): Promis
     progress.contentFetch();
     enterStep('render_handoff');
     settleOnContent();
-    await frame.render({ mode: 'subdomain', label, cid, chat, ...manifestFacts(manifests) });
+    await frame.render({ mode: 'subdomain', label, cid, base: options.base, chat, ...manifestFacts(manifests) });
   };
   const rendered = (manifests: ProductManifests): void => {
     options.failureScreen.forget();

apps/host/src/runtime/product-frame.spec.ts

@@ -363,6 +363,32 @@ describe('product frame renders', () => {
     },
   );
 
+  it('As a visitor who opened a product by its name in the path, the product gets only its own path', async () => {
+    // Given
+    location = {
+      ...location,
+      href: 'http://localhost:3000/Doom.dot/level/2?skill=3#boss',
+      pathname: '/Doom.dot/level/2',
+      search: '?skill=3',
+      hash: '#boss',
+    };
+    const fakes = harness();
+
+    // When
+    await settle(
+      fakes,
+      { mode: 'subdomain', label: 'doom', cid: 'cid', base: '/Doom.dot', chat: Promise.resolve(false) },
+      0,
+    );
+
+    // Then
+    const url = new URL(nth(fakes.hosts, 0).options.iframeUrl);
+    expect(url.hostname).toBe('doom.app.localhost');
+    expect(url.pathname).toBe('/level/2');
+    expect(url.searchParams.get('skill')).toBe('3');
+    expect(url.hash).toBe('#boss');
+  });
+
   it('As a user who reset everything, only the first product frame after the reload purges the sandbox origin', async () => {
     // Given
     const fakes = harness();

apps/host/src/runtime/product-frame.ts

@@ -28,10 +28,17 @@ import type { ManifestFacts } from './manifest-facts.js';
 /**
  * A product the host loads from a URL it was given, or from its content id on the app subdomain. `chat` says whether it
  * declares chat, which picks its connection's execution kind, so the frame awaits it before it connects the product.
+ * `base` is the page path ahead of the product's own, which its frame does not get.
  */
 export type FrameProduct =
   | { mode: 'iframe'; label: string; url: string; productId?: string | undefined; chat: Promise<boolean> }
-  | ({ mode: 'subdomain'; label: string; cid: string; chat: Promise<boolean> } & ManifestFacts);
+  | ({
+      mode: 'subdomain';
+      label: string;
+      cid: string;
+      base?: string | undefined;
+      chat: Promise<boolean>;
+    } & ManifestFacts);
 
 /** `lost` is a product whose core went down, was refused or turned stale, until its render on a replacement begins. */
 export type ProductFrameStatus = 'idle' | 'connecting' | 'connected' | 'lost' | 'failed';
@@ -604,7 +611,7 @@ type PageLocation = ReturnType<ProductFramePage['location']>;
 
 function sandboxUrl(product: Extract<FrameProduct, { mode: 'subdomain' }>, location: PageLocation): URL {
   const origin = appOrigin(product.label, location);
-  const deepPath = getDeepPath(location);
+  const deepPath = getDeepPath(location, product.base ?? '');
   const url = new URL(deepPath ? `${origin}${deepPath}` : origin);
   if (url.origin !== origin) {
     throw new Error(ERRORS.CROSS_ORIGIN_APP_URL);
@@ -637,13 +644,16 @@ function appOrigin(label: string, location: PageLocation): string {
   return `https://${label}.app.${BASE_DOMAIN}`;
 }
 
-function getDeepPath(location: PageLocation): string {
+function getDeepPath(location: PageLocation, productBase: string): string {
   const { pathname, search, hash } = location;
   let p = pathname;
   const base = import.meta.env.BASE_URL;
   if (base !== '/' && p.startsWith(base)) {
     p = '/' + p.slice(base.length);
   }
+  if (productBase !== '' && p.startsWith(productBase)) {
+    p = p.slice(productBase.length);
+  }
   const isRoot = p === '' || p === '/';
   if (isRoot) {
     return search || hash ? search + hash : '';

apps/host/src/shell-route.spec.ts

@@ -32,7 +32,25 @@ describe('readShellRoute', () => {
     const route = readShellRoute(at('http://doom.localhost:5173/localhost:3000/deep'), LOCAL_DEBUG);
 
     // Then
-    expect(route).toEqual({ kind: 'product', label: 'doom' });
+    expect(route).toEqual({ kind: 'product', label: 'doom', base: '' });
+  });
+
+  it('As a visitor on the bare host, I open a product by its name in the path, with or without .dot', () => {
+    // When
+    const plain = readShellRoute(at('https://example.li/doom/level/2?skill=3#boss'), RELEASE);
+    const dotted = readShellRoute(at('https://example.li/Doom.dot'), RELEASE);
+
+    // Then
+    expect(plain).toEqual({ kind: 'product', label: 'doom', base: '/doom' });
+    expect(dotted).toEqual({ kind: 'product', label: 'doom', base: '/Doom.dot' });
+  });
+
+  it('As a visitor on the bare host, a path that cannot be a name gets me no product', () => {
+    // When
+    const route = readShellRoute(at('https://example.li/not_a-name-/deep'), RELEASE);
+
+    // Then
+    expect(route).toEqual({ kind: 'landing' });
   });
 
   it('As a visitor on a sandbox host or the bare host, I am given no product, so the shell can send me to the landing page', () => {

apps/host/src/shell-route.ts

@@ -1,11 +1,11 @@
 // Copyright 2026 Parity Technologies (UK) Ltd.
 // SPDX-License-Identifier: AGPL-3.0-only
 
-// Which page the shell is: a product by its `.dot` label, a local or preview target in debug builds, or no product at
-// all. Read from the URL alone.
+// Which page the shell is: a product by its `.dot` label in the hostname or the path, a local or preview target in debug
+// builds, or no product at all. Read from the URL alone.
 
 import { BASE_DOMAIN } from '@dotli/config';
-import { dotNsUrl } from '@dotli/resolver';
+import { dotNsUrl, isValidDotLabel } from '@dotli/resolver';
 import { log } from '@dotli/shared';
 import { parseDotLabel } from './dot-label.js';
 import { parsePreviewTargetUrl } from './preview-route.js';
@@ -43,7 +43,12 @@ export interface LocalTarget {
 }
 
 export type ShellRoute =
-  | { kind: 'product'; label: string }
+  | {
+      kind: 'product';
+      label: string;
+      /** The page path ahead of the product's own: `/<label>` where the path names the product, else empty. */
+      base: string;
+    }
   | LocalTarget
   /** A nested dot.li, which would draw a second topbar. */
   | { kind: 'nested' }
@@ -56,7 +61,7 @@ export function readShellRoute(location: ShellLocation, options: RouteOptions):
   }
   const label = parseDotLabel(location.hostname);
   if (label !== null) {
-    return { kind: 'product', label };
+    return { kind: 'product', label, base: '' };
   }
   const productId = options.localhost ? readProductIdOverride(location.search) : undefined;
   if (previewUrl !== null) {
@@ -66,7 +71,18 @@ export function readShellRoute(location: ShellLocation, options: RouteOptions):
   if (localhostUrl !== null) {
     return { kind: 'localhost', url: localhostUrl, host: new URL(localhostUrl).host, productId };
   }
-  return { kind: 'landing' };
+  return readPathProduct(location.pathname) ?? { kind: 'landing' };
+}
+
+/** A link to a product on the bare host: `/<label>` or `/<label>.dot`, then the product's own path. */
+function readPathProduct(pathname: string): ShellRoute | null {
+  const segment = /^\/([^/]+)/.exec(pathname)?.[1];
+  if (segment === undefined) {
+    return null;
+  }
+  // Lowercased as the browser lowercases a hostname, so both spellings of a link reach the same name.
+  const label = segment.replace(/\.dot$/i, '').toLowerCase();
+  return isValidDotLabel(label) ? { kind: 'product', label, base: `/${segment}` } : null;
 }
 
 function readProductIdOverride(search: string): string | undefined {

nginx/nginx.conf.template

@@ -48,7 +48,8 @@ server {
     ${SENTRY}set $sentry_project "${SENTRY_PROJECT}";
     ${SENTRY}include /etc/nginx/snippets/dotli-sentry-tunnel.conf;
 
-    # The landing page. Every other path gets the shell, which sends a URL with no product back here.
+    # The landing page. Every other path gets the shell, which opens the product `/<label>` names and sends a URL with no
+    # product back here.
     location = / {
         try_files /landing.html =404;
     }

nginx/nginx.docker.conf.template

@@ -14,7 +14,8 @@ server {
     include /etc/nginx/snippets/dotli-headers-host.conf;
     include /etc/nginx/snippets/dotli-precompressed.conf;
 
-    # The landing page. Every other path gets the shell, which sends a URL with no product back here.
+    # The landing page. Every other path gets the shell, which opens the product `/<label>` names and sends a URL with no
+    # product back here.
     location = / {
         try_files /landing.html =404;
     }