@cardstack/boxel-cli 0.2.0-unstable.448 → 0.3.0-unstable.13

package/bundled-types/host-app/services/environment-service.ts

@@ -0,0 +1,26 @@
+import type Owner from '@ember/owner';
+import Service from '@ember/service';
+
+import config from '@cardstack/host/config/environment';
+
+const { autoSaveDelayMs, cardSizeLimitBytes, fileSizeLimitBytes } = config;
+
+// we use this service to help instrument environment settings in tests
+export default class EnvironmentService extends Service {
+  autoSaveDelayMs: number;
+  cardSizeLimitBytes: number;
+  fileSizeLimitBytes: number;
+
+  constructor(owner: Owner) {
+    super(owner);
+    this.autoSaveDelayMs = autoSaveDelayMs;
+    this.cardSizeLimitBytes = cardSizeLimitBytes;
+    this.fileSizeLimitBytes = fileSizeLimitBytes;
+  }
+}
+
+declare module '@ember/service' {
+  interface Registry {
+    'environment-service': EnvironmentService;
+  }
+}

package/bundled-types/host-app/services/error-display.ts

@@ -0,0 +1,42 @@
+import type Owner from '@ember/owner';
+import Service from '@ember/service';
+import { service } from '@ember/service';
+
+import type { BoxelErrorForContext } from 'https://cardstack.com/base/matrix-event';
+
+import type ResetService from './reset';
+
+export interface DisplayedErrorProvider {
+  getError: () => BoxelErrorForContext;
+}
+
+export default class ErrorDisplayService extends Service {
+  @service declare reset: ResetService;
+  errorProviders: Set<DisplayedErrorProvider> = new Set();
+
+  constructor(owner: Owner) {
+    super(owner);
+    this.reset.register(this);
+  }
+
+  resetState() {
+    this.errorProviders.clear();
+  }
+
+  register(errorProvider: DisplayedErrorProvider) {
+    this.errorProviders.add(errorProvider);
+  }
+  unregister(errorProvider: DisplayedErrorProvider) {
+    this.errorProviders.delete(errorProvider);
+  }
+
+  getDisplayedErrors() {
+    return [...this.errorProviders].map((provider) => provider.getError());
+  }
+}
+
+declare module '@ember/service' {
+  interface Registry {
+    'error-display': ErrorDisplayService;
+  }
+}

package/bundled-types/host-app/services/file-upload.ts

@@ -0,0 +1,212 @@
+import type Owner from '@ember/owner';
+import Service, { service } from '@ember/service';
+
+import { isTesting } from '@embroider/macros';
+import { tracked } from '@glimmer/tracking';
+
+import {
+  Deferred,
+  RealmPaths,
+  isCardErrorJSONAPI,
+  type LocalPath,
+} from '@cardstack/runtime-common';
+
+import type { FileDef } from 'https://cardstack.com/base/file-api';
+
+import type NetworkService from './network';
+import type ResetService from './reset';
+import type StoreService from './store';
+
+export class FileUploadTask {
+  @tracked state: 'picking' | 'uploading' | 'complete' | 'error' = 'picking';
+  @tracked error?: string;
+  @tracked fileName?: string;
+  result: Promise<FileDef | undefined>;
+
+  private _fileDeferred = new Deferred<File | null>();
+  private _resultDeferred = new Deferred<FileDef | undefined>();
+
+  constructor() {
+    this.result = this._resultDeferred.promise;
+  }
+
+  // Test seam: provide a file without the native picker
+  __provideFileForTesting(file: File | null) {
+    this._fileDeferred.fulfill(file);
+  }
+
+  _resolveFile(file: File | null) {
+    this._fileDeferred.fulfill(file);
+  }
+
+  awaitFile(): Promise<File | null> {
+    return this._fileDeferred.promise;
+  }
+
+  _fulfill(value: FileDef | undefined) {
+    this._resultDeferred.fulfill(value);
+  }
+}
+
+export default class FileUploadService extends Service {
+  @service declare private network: NetworkService;
+  @service declare private reset: ResetService;
+  @service declare private store: StoreService;
+
+  @tracked activeUploads: FileUploadTask[] = [];
+  private queuedLocalFilesForTesting: (File | null)[] = [];
+
+  constructor(owner: Owner) {
+    super(owner);
+    this.reset.register(this);
+  }
+
+  resetState() {
+    this.activeUploads = [];
+  }
+
+  uploadFile(opts: { realmURL: URL; acceptTypes?: string }): FileUploadTask {
+    let task = new FileUploadTask();
+    this._startTask(task, opts.realmURL);
+
+    if (!isTesting()) {
+      this._openFilePicker(task, opts.acceptTypes);
+    }
+
+    return task;
+  }
+
+  uploadProvidedFile(opts: { realmURL: URL; file: File }): FileUploadTask {
+    let task = new FileUploadTask();
+    this._startTask(task, opts.realmURL);
+    task._resolveFile(opts.file);
+
+    return task;
+  }
+
+  private _startTask(task: FileUploadTask, realmURL: URL) {
+    this.activeUploads = [...this.activeUploads, task];
+    this._processUpload(task, realmURL).finally(() => {
+      this.activeUploads = this.activeUploads.filter((t) => t !== task);
+    });
+  }
+
+  async pickLocalFile(opts?: {
+    acceptTypes?: string;
+  }): Promise<File | undefined> {
+    if (isTesting()) {
+      let next = this.queuedLocalFilesForTesting.shift();
+      return next ?? undefined;
+    }
+    let file = await this._openNativeFilePicker(opts?.acceptTypes);
+    return file ?? undefined;
+  }
+
+  // Test seam for local-file attachment flow
+  __queueLocalFileForTesting(file: File | null) {
+    this.queuedLocalFilesForTesting.push(file);
+  }
+
+  private _openFilePicker(task: FileUploadTask, acceptTypes?: string) {
+    this._openNativeFilePicker(acceptTypes).then((file) => {
+      task._resolveFile(file);
+    });
+  }
+
+  private _openNativeFilePicker(acceptTypes?: string): Promise<File | null> {
+    let deferred = new Deferred<File | null>();
+    let input = document.createElement('input');
+    input.type = 'file';
+    input.accept = acceptTypes ?? '';
+    input.style.display = 'none';
+    document.body.appendChild(input);
+
+    input.addEventListener(
+      'change',
+      () => {
+        deferred.fulfill(input.files?.[0] ?? null);
+        input.remove();
+      },
+      { once: true },
+    );
+    input.addEventListener(
+      'cancel',
+      () => {
+        deferred.fulfill(null);
+        input.remove();
+      },
+      { once: true },
+    );
+
+    input.click();
+    return deferred.promise;
+  }
+
+  private async _processUpload(task: FileUploadTask, realmURL: URL) {
+    try {
+      let file = await task.awaitFile();
+
+      if (!file) {
+        task.state = 'complete';
+        task._fulfill(undefined);
+        return;
+      }
+
+      let lastDotIndex = file.name.lastIndexOf('.');
+      if (lastDotIndex <= 0 || lastDotIndex >= file.name.length - 1) {
+        throw new Error(
+          `The file "${file.name}" has no extension. Please select a file with an extension (e.g. .png, .txt, .gts).`,
+        );
+      }
+
+      task.fileName = file.name;
+      task.state = 'uploading';
+
+      let targetUrl = new RealmPaths(realmURL).fileURL(file.name as LocalPath);
+
+      let response = await this.network.authedFetch(targetUrl, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/octet-stream',
+        },
+        body: file,
+      });
+
+      if (!response.ok) {
+        let detail = response.statusText || '';
+        try {
+          let body = await response.json();
+          let errorEntry = body?.errors?.[0];
+          if (errorEntry?.detail || errorEntry?.message) {
+            detail = errorEntry.detail ?? errorEntry.message;
+          }
+        } catch {
+          // response may not be JSON
+        }
+        throw new Error(
+          `Upload of ${file.name} to ${realmURL.href} failed: ${response.status}${detail ? ` ${detail}` : ''}`,
+        );
+      }
+
+      let fileDef = await this.store.getWithoutCache<FileDef>(targetUrl.href, {
+        type: 'file-meta',
+      });
+      if (isCardErrorJSONAPI(fileDef)) {
+        throw new Error('Failed to load file metadata after upload');
+      }
+
+      task.state = 'complete';
+      task._fulfill(fileDef);
+    } catch (e: any) {
+      task.state = 'error';
+      task.error = e.message ?? 'Upload failed';
+      task._fulfill(undefined);
+    }
+  }
+}
+
+declare module '@ember/service' {
+  interface Registry {
+    'file-upload': FileUploadService;
+  }
+}

package/bundled-types/host-app/services/host-mode-service.ts

@@ -0,0 +1,381 @@
+import type Owner from '@ember/owner';
+import Service, { service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+
+import window from 'ember-window-mock';
+
+import { sanitizeHeadHTML } from '@cardstack/runtime-common';
+
+import config from '@cardstack/host/config/environment';
+
+const DEFAULT_HEAD_HTML = '<title>Boxel</title>';
+
+function headContainsTitle(html: string): boolean {
+  return /<title[\s>]/.test(html);
+}
+
+function ensureSingleTitle(headHTML: string): string {
+  return headContainsTitle(headHTML)
+    ? headHTML
+    : `${DEFAULT_HEAD_HTML}\n${headHTML}`;
+}
+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';
+import type RealmServerService from '@cardstack/host/services/realm-server';
+import type ResetService from '@cardstack/host/services/reset';
+
+interface PublishedRealmMetadata {
+  urlString: string;
+  publishedAt: number;
+  currentCardUrlString: string | undefined;
+}
+
+export default class HostModeService extends Service {
+  @service declare hostModeStateService: HostModeStateService;
+  @service declare operatorModeStateService: OperatorModeStateService;
+  @service declare realm: RealmService;
+  @service declare realmServer: RealmServerService;
+  @service declare reset: ResetService;
+
+  // increasing token to ignore stale async head fetches
+  private headUpdateRequestId = 0;
+
+  // tracks whether the current head template contains a title tag
+  @tracked headTemplateContainsTitle = false;
+
+  constructor(owner: Owner) {
+    super(owner);
+    this.reset.register(this);
+  }
+
+  resetState() {
+    this.headUpdateRequestId = 0;
+    this.headTemplateContainsTitle = false;
+  }
+
+  get isActive() {
+    if (this.simulatingHostMode) {
+      return true;
+    }
+
+    return (
+      !config.hostsOwnAssets &&
+      this.isRealmServerDomain === false &&
+      this.originIsNotMatrixTests
+    );
+  }
+
+  get isRealmServerDomain() {
+    if (this.simulatingHostMode) {
+      return false;
+    }
+
+    if (config.realmServerURL) {
+      let realmServerDomain = new URL(config.realmServerURL).hostname;
+      let currentHost = window.location.hostname;
+
+      return (
+        currentHost.endsWith(realmServerDomain) &&
+        // Using a submdomain of localhost indicates host mode
+        !currentHost.endsWith('.localhost')
+      );
+    }
+
+    return false;
+  }
+
+  get simulatingHostMode() {
+    return new URLSearchParams(window.location.search).has('hostModeOrigin');
+  }
+
+  get hostModeOrigin() {
+    if (this.simulatingHostMode) {
+      return new URLSearchParams(window.location.search).get('hostModeOrigin');
+    }
+
+    return window.location.origin;
+  }
+
+  get originIsNotMatrixTests() {
+    // Realm-server speaks https locally now (see infra:ensure-dev-cert);
+    // test-realms and the matrix-test realm share the same cert and
+    // bind their respective ports.
+    return (
+      this.hostModeOrigin !== 'http://localhost:4202' &&
+      this.hostModeOrigin !== 'https://localhost:4202' &&
+      this.hostModeOrigin !== 'http://localhost:4205' &&
+      this.hostModeOrigin !== 'https://localhost:4205'
+    );
+  }
+
+  get realmURL() {
+    return this.operatorModeStateService.realmURL;
+  }
+
+  // CS-10055: routing rules from the realm config card. The realm-server
+  // merges this into the @cardstack/host/config/environment meta tag
+  // per-request when the request hits a realm whose config card has
+  // hostRoutingRules — so the first-render decision in the index route
+  // is synchronous and the field is part of the typed config surface
+  // rather than a window global.
+  get hostRoutingMap(): { path: string; id: string }[] {
+    let map = (config as { hostRoutingMap?: unknown }).hostRoutingMap;
+    return Array.isArray(map) ? (map as { path: string; id: string }[]) : [];
+  }
+
+  // Returns the target card id if `path` matches a routing rule, else null.
+  // `path` is the URL pathname on the host (what Ember's `/*path` catch-all
+  // route delivers — e.g. `<user>/<realm>/whitepaper` for a request to
+  // `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.
+  resolveRoutedPath(path: string): string | null {
+    let normalized = path.startsWith('/') ? path : `/${path}`;
+    let rule = this.hostRoutingMap.find((r) => r.path === normalized);
+    return rule ? rule.id : null;
+  }
+
+  get currentCardId() {
+    if (this.isActive) {
+      let stack = this.hostModeStateService.stackItems;
+
+      if (stack.length > 0) {
+        return stack[stack.length - 1];
+      }
+    }
+
+    return this.operatorModeStateService.hostModePrimaryCard ?? undefined;
+  }
+
+  get publishedRealmMetadata() {
+    let realmInfo = this.operatorModeStateService.currentRealmInfo;
+    if (
+      !realmInfo?.lastPublishedAt ||
+      typeof realmInfo.lastPublishedAt !== 'object'
+    ) {
+      return [];
+    }
+
+    return Object.entries(realmInfo.lastPublishedAt)
+      .map(
+        ([url, publishedAt]) =>
+          ({
+            urlString: url,
+            publishedAt: this.parsePublishedAt(publishedAt),
+            currentCardUrlString: this.fullURL(url),
+          }) as PublishedRealmMetadata,
+      )
+      .sort((a, b) => b.publishedAt - a.publishedAt);
+  }
+
+  get publishedRealmURLs() {
+    return this.publishedRealmMetadata.map(
+      (publishedRealmMetadata) => publishedRealmMetadata.urlString,
+    );
+  }
+
+  get defaultPublishedRealmURL() {
+    return this.publishedRealmURLs[0];
+  }
+
+  get defaultPublishedSiteURL() {
+    let defaultURL = this.defaultPublishedRealmURL;
+    if (!defaultURL) {
+      return undefined;
+    }
+
+    return this.fullURL(defaultURL);
+  }
+
+  fullURL(baseURL: string) {
+    let cardId = this.currentCardId;
+    if (!cardId) {
+      return baseURL;
+    }
+
+    let fullURL = baseURL + cardId.replace(this.realmURL, '');
+
+    if (fullURL === `${baseURL}index`) {
+      // Strip trailing `/index` for host mode links
+      fullURL = baseURL;
+    }
+
+    return fullURL;
+  }
+
+  lastPublishedTimestamp(url: string) {
+    let metadata = this.publishedRealmMetadata.find(
+      (entry) => entry.urlString === url,
+    );
+    return metadata ? metadata.publishedAt : null;
+  }
+
+  isPublished(url: string) {
+    return this.lastPublishedTimestamp(url) !== null;
+  }
+
+  async updateHeadTemplate(cardURL?: string | null) {
+    if (typeof document === 'undefined') {
+      return;
+    }
+
+    let normalizedCardURL =
+      (cardURL ?? this.currentCardId)?.replace(/\.json$/, '') ?? null;
+    let requestId = ++this.headUpdateRequestId;
+
+    if (normalizedCardURL === null) {
+      // If there is no card, clear the head content
+      this.headTemplateContainsTitle = false;
+      this.replaceHeadTemplate(null);
+      return;
+    }
+
+    let headHTML: string | null = null;
+    try {
+      let prerenderedHead = await this.fetchPrerenderedHead(normalizedCardURL);
+
+      if (requestId !== this.headUpdateRequestId) {
+        return;
+      }
+
+      if (prerenderedHead !== undefined) {
+        headHTML = prerenderedHead;
+      } else {
+        return;
+      }
+    } catch (_error) {
+      return;
+    }
+
+    if (requestId !== this.headUpdateRequestId) {
+      return;
+    }
+
+    // Track whether the fetched head HTML contains a title
+    this.headTemplateContainsTitle =
+      headHTML !== null && headContainsTitle(headHTML);
+
+    this.replaceHeadTemplate(
+      headHTML !== null ? ensureSingleTitle(headHTML) : null,
+    );
+  }
+
+  private async fetchPrerenderedHead(
+    cardURL: string,
+  ): Promise<string | null | undefined> {
+    let card = new URL(cardURL);
+    let realmRoot =
+      this.realm.realmOf(card) ??
+      new URL(
+        card.pathname.replace(/[^/]+$/, ''),
+        `${card.protocol}//${card.host}`,
+      ).href;
+    let realmServerURLs = this.realmServer.getRealmServersForRealms([
+      realmRoot,
+    ]);
+    // TODO remove this assertion after multi-realm server/federated identity is supported
+    this.realmServer.assertOwnRealmServer(realmServerURLs);
+    let [realmServerURL] = realmServerURLs;
+    let hostModeOrigin = this.hostModeOrigin;
+    if (
+      hostModeOrigin &&
+      new URL(realmServerURL).origin !== new URL(hostModeOrigin).origin
+    ) {
+      realmServerURL = hostModeOrigin;
+    }
+    let searchURL = new URL('_federated-search-prerendered', realmServerURL);
+    let cardJsonURL = cardURL.endsWith('.json') ? cardURL : `${cardURL}.json`;
+    let response = await fetch(searchURL.toString(), {
+      method: 'QUERY',
+      headers: {
+        Accept: 'application/vnd.card+json',
+      },
+      credentials: 'include',
+      body: JSON.stringify({
+        realms: [realmRoot],
+        prerenderedHtmlFormat: 'head',
+        cardUrls: [cardJsonURL],
+      }),
+    });
+
+    if (!response.ok) {
+      return undefined;
+    }
+
+    let json;
+    try {
+      json = await response.json();
+    } catch (_error) {
+      return undefined;
+    }
+    let headHTML: unknown = json?.data?.[0]?.attributes?.html;
+    return typeof headHTML === 'string' ? headHTML : null;
+  }
+
+  private replaceHeadTemplate(headHTML: string | null) {
+    if (typeof document === 'undefined') {
+      return;
+    }
+
+    let markers = this.findHeadMarkers();
+    if (!markers) {
+      return;
+    }
+
+    let [start, end] = markers;
+    let parent = start.parentNode;
+
+    if (!parent) {
+      return;
+    }
+
+    for (let node = start.nextSibling; node && node !== end; ) {
+      let next = node.nextSibling;
+      parent.removeChild(node);
+      node = next;
+    }
+
+    if (!headHTML || headHTML.trim().length === 0) {
+      let fallback = document
+        .createRange()
+        .createContextualFragment(DEFAULT_HEAD_HTML);
+      parent.insertBefore(fallback, end);
+      return;
+    }
+
+    let sanitized = sanitizeHeadHTML(headHTML, document);
+    if (sanitized) {
+      parent.insertBefore(sanitized, end);
+    } else {
+      let fallback = document
+        .createRange()
+        .createContextualFragment(DEFAULT_HEAD_HTML);
+      parent.insertBefore(fallback, end);
+    }
+  }
+
+  private findHeadMarkers(): [Element, Element] | null {
+    let head = document.head;
+    if (!head) {
+      return null;
+    }
+
+    let start: Element | null = head.querySelector('[data-boxel-head-start]');
+    let end: Element | null = head.querySelector('[data-boxel-head-end]');
+
+    return start && end ? [start, end] : null;
+  }
+
+  private parsePublishedAt(value: unknown) {
+    let publishedAt = Number(value ?? 0);
+    return Number.isFinite(publishedAt) ? publishedAt : 0;
+  }
+}
+
+declare module '@ember/service' {
+  interface Registry {
+    'host-mode-service': HostModeService;
+  }
+}