@jxsuite/studio 0.37.0 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/studio",
-  "version": "0.37.0",
+  "version": "1.0.0",
   "description": "Jx Studio — visual builder for Jx documents",
   "license": "MIT",
   "repository": {
@@ -39,48 +39,48 @@
     "@atlaskit/pragmatic-drag-and-drop": "^2.0.1",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^2.0.0",
     "@jxsuite/ai": "^0.33.0",
-    "@jxsuite/collab": "^0.2.0",
-    "@jxsuite/create": "^0.36.0",
-    "@jxsuite/parser": "^0.35.1",
-    "@jxsuite/protocol": "^0.3.0",
-    "@jxsuite/runtime": "^0.34.2",
-    "@jxsuite/schema": "^0.35.0",
-    "@spectrum-web-components/accordion": "^1.12.1",
-    "@spectrum-web-components/action-bar": "1.12.1",
-    "@spectrum-web-components/action-button": "^1.12.1",
-    "@spectrum-web-components/action-group": "^1.12.1",
-    "@spectrum-web-components/base": "^1.12.1",
-    "@spectrum-web-components/button": "^1.12.1",
-    "@spectrum-web-components/checkbox": "^1.12.1",
-    "@spectrum-web-components/color-area": "^1.12.1",
-    "@spectrum-web-components/color-handle": "^1.12.1",
-    "@spectrum-web-components/color-slider": "^1.12.1",
-    "@spectrum-web-components/combobox": "^1.12.1",
-    "@spectrum-web-components/dialog": "^1.12.1",
-    "@spectrum-web-components/divider": "^1.12.1",
-    "@spectrum-web-components/field-label": "^1.12.1",
-    "@spectrum-web-components/help-text": "^1.12.1",
-    "@spectrum-web-components/icon": "^1.12.1",
-    "@spectrum-web-components/icons-ui": "^1.12.1",
-    "@spectrum-web-components/icons-workflow": "^1.12.1",
-    "@spectrum-web-components/menu": "^1.12.1",
-    "@spectrum-web-components/number-field": "^1.12.1",
-    "@spectrum-web-components/overlay": "^1.12.1",
+    "@jxsuite/collab": "^0.3.0",
+    "@jxsuite/create": "^1.0.0",
+    "@jxsuite/markup": "^0.2.0",
+    "@jxsuite/protocol": "^0.4.0",
+    "@jxsuite/runtime": "^1.0.0",
+    "@jxsuite/schema": "^1.0.0",
+    "@spectrum-web-components/accordion": "^1.12.2",
+    "@spectrum-web-components/action-bar": "1.12.2",
+    "@spectrum-web-components/action-button": "^1.12.2",
+    "@spectrum-web-components/action-group": "^1.12.2",
+    "@spectrum-web-components/base": "^1.12.2",
+    "@spectrum-web-components/button": "^1.12.2",
+    "@spectrum-web-components/checkbox": "^1.12.2",
+    "@spectrum-web-components/color-area": "^1.12.2",
+    "@spectrum-web-components/color-handle": "^1.12.2",
+    "@spectrum-web-components/color-slider": "^1.12.2",
+    "@spectrum-web-components/combobox": "^1.12.2",
+    "@spectrum-web-components/dialog": "^1.12.2",
+    "@spectrum-web-components/divider": "^1.12.2",
+    "@spectrum-web-components/field-label": "^1.12.2",
+    "@spectrum-web-components/help-text": "^1.12.2",
+    "@spectrum-web-components/icon": "^1.12.2",
+    "@spectrum-web-components/icons-ui": "^1.12.2",
+    "@spectrum-web-components/icons-workflow": "^1.12.2",
+    "@spectrum-web-components/menu": "^1.12.2",
+    "@spectrum-web-components/number-field": "^1.12.2",
+    "@spectrum-web-components/overlay": "^1.12.2",
     "@spectrum-web-components/overlay-trigger": "^0.1.7",
-    "@spectrum-web-components/picker": "^1.12.1",
-    "@spectrum-web-components/picker-button": "^1.12.1",
-    "@spectrum-web-components/popover": "^1.12.1",
-    "@spectrum-web-components/progress-circle": "^1.12.1",
-    "@spectrum-web-components/search": "^1.12.1",
-    "@spectrum-web-components/swatch": "^1.12.1",
-    "@spectrum-web-components/switch": "^1.12.1",
-    "@spectrum-web-components/table": "^1.12.1",
-    "@spectrum-web-components/tabs": "^1.12.1",
-    "@spectrum-web-components/textfield": "^1.12.1",
-    "@spectrum-web-components/theme": "^1.12.1",
-    "@spectrum-web-components/toast": "^1.12.1",
-    "@spectrum-web-components/tooltip": "^1.12.1",
-    "@spectrum-web-components/underlay": "^1.12.1",
+    "@spectrum-web-components/picker": "^1.12.2",
+    "@spectrum-web-components/picker-button": "^1.12.2",
+    "@spectrum-web-components/popover": "^1.12.2",
+    "@spectrum-web-components/progress-circle": "^1.12.2",
+    "@spectrum-web-components/search": "^1.12.2",
+    "@spectrum-web-components/swatch": "^1.12.2",
+    "@spectrum-web-components/switch": "^1.12.2",
+    "@spectrum-web-components/table": "^1.12.2",
+    "@spectrum-web-components/tabs": "^1.12.2",
+    "@spectrum-web-components/textfield": "^1.12.2",
+    "@spectrum-web-components/theme": "^1.12.2",
+    "@spectrum-web-components/toast": "^1.12.2",
+    "@spectrum-web-components/tooltip": "^1.12.2",
+    "@spectrum-web-components/underlay": "^1.12.2",
     "@vue/reactivity": "3.5.39",
     "ajv": "^8.20.0",
     "ajv-formats": "^3.0.1",
@@ -93,9 +93,9 @@
   "devDependencies": {
     "@happy-dom/global-registrator": "^20.10.6",
     "@types/mdast": "^4.0.4",
-    "@webref/css": "^8.6.1",
+    "@webref/css": "^8.7.0",
     "@webref/elements": "^2.7.1",
-    "@webref/idl": "^3.81.2"
+    "@webref/idl": "^3.81.3"
   },
   "//vue-reactivity": "Exact pin required — must match @jxsuite/runtime to avoid cross-boundary proxy bugs"
 }

package/src/account-status.ts

@@ -0,0 +1,39 @@
+/**
+ * Account onboarding status — a synchronous render cache over the optional
+ * `platform.getAccountStatus` PAL member (cloud GitHub-App installations). Hydrated once at boot
+ * (studio.ts) like the project-list cache; the welcome screen reads it synchronously to prompt
+ * "install the GitHub App" when the user has no repository access yet.
+ */
+import { getPlatform, hasPlatform } from "./platform";
+import type { AccountStatus } from "./types";
+
+let cache: AccountStatus | null = null;
+
+/** Refresh the cache from the platform; null when unsupported, failing, or unknown. */
+export async function hydrateAccountStatus(): Promise<void> {
+  if (!hasPlatform() || typeof getPlatform().getAccountStatus !== "function") {
+    cache = null;
+    return;
+  }
+  try {
+    cache = (await getPlatform().getAccountStatus?.()) ?? null;
+  } catch {
+    // Onboarding prompts are progressive enhancement; unknown status never nags.
+    cache = null;
+  }
+}
+
+/** Synchronous snapshot for render paths (never awaits); null = unknown. */
+export function getAccountStatus(): AccountStatus | null {
+  return cache;
+}
+
+/** True when the account verifiably has no repository access yet and we know where to fix it. */
+export function needsAppInstall(): boolean {
+  return cache !== null && cache.installations.length === 0 && Boolean(cache.appInstallUrl);
+}
+
+/** Reset seam for tests. */
+export function resetAccountStatus(): void {
+  cache = null;
+}

package/src/browse/browse.ts

@@ -34,7 +34,8 @@ import {
 } from "../format/format-host";
 
 import type { ComponentEntry } from "../files/components";
-import type { ContentTypeDef, JxDocument } from "@jxsuite/schema/types";
+import type { ContentSectionEntry } from "../types";
+import type { JxDocument } from "@jxsuite/schema/types";
 
 // ─── Category definitions ────────────────────────────────────────────────────
 
@@ -184,19 +185,16 @@ async function collectFiles(
 }
 
 /**
- * Match a file path against project contentTypes source directories to find its content type name.
- * Returns the content type name (capitalized) or null if no match.
+ * Match a file path against the project `content` section's source directories to find its content
+ * type name. Returns the content type name (capitalized) or null if no match.
  *
  * @param {string} filePath
  * @returns {string | null}
  */
 function contentTypeFor(filePath: string) {
   const config = projectState?.projectConfig;
-  if (!config?.contentTypes) {
-    return null;
-  }
-  for (const [name, def] of Object.entries(config.contentTypes)) {
-    const d = def as ContentTypeDef;
+  const content = (config?.content ?? {}) as Record<string, ContentSectionEntry>;
+  for (const [name, d] of Object.entries(content)) {
     if (!d.source) {
       continue;
     }
@@ -264,7 +262,8 @@ function getEntityTypes() {
  */
 function buildFrontmatterYaml(contentTypeName: string) {
   const config = projectState?.projectConfig;
-  const col = config?.contentTypes?.[contentTypeName];
+  const content = (config?.content ?? {}) as Record<string, ContentSectionEntry>;
+  const col = content[contentTypeName];
   if (!col?.schema?.properties) {
     return "title: Untitled\n";
   }
@@ -284,11 +283,8 @@ function buildFrontmatterYaml(contentTypeName: string) {
  */
 function getContentTypeTypes() {
   const config = projectState?.projectConfig;
-  if (!config?.contentTypes) {
-    return [];
-  }
-  return Object.entries(config.contentTypes).map(([name, def]) => {
-    const d = def as ContentTypeDef;
+  const content = (config?.content ?? {}) as Record<string, ContentSectionEntry>;
+  return Object.entries(content).map(([name, d]) => {
     const dir = d.source ? d.source.replace(/^\.\//, "").replace(/\/$/, "") : name;
     return {
       contentTypeName: name,

package/src/canvas/iframe-host.ts

@@ -1114,7 +1114,7 @@ function handleMessage(state: HostState, msg: IframeToParent): void {
         activeEditHost = null;
       }
       toolbarRefresh?.();
-      return;
+      break;
     }
     default: {
       break;

package/src/editor/context-menu.ts

@@ -3,7 +3,7 @@
 import { html } from "lit-html";
 import { jsonClone } from "../utils/studio-utils";
 import { ref } from "lit-html/directives/ref.js";
-import { htmlToJx } from "@jxsuite/parser/html-to-jx";
+import { htmlToJx } from "@jxsuite/markup/html-to-jx";
 import { childIndex, getNodeAtPath, parentElementPath } from "../store";
 import { activeTab, workspace } from "../workspace/workspace";
 import {

package/src/editor/repeater-scope.ts

@@ -16,12 +16,8 @@ import { isRef } from "@jxsuite/schema/guards";
 import { getNodeAtPath } from "../state";
 
 import type { JxPath } from "../state";
-import type {
-  JxMappedArray,
-  JxMutableNode,
-  ProjectConfig,
-  ContentTypeSchema,
-} from "@jxsuite/schema/types";
+import type { ContentSectionEntry } from "../types";
+import type { JxMappedArray, JxMutableNode, ProjectConfig } from "@jxsuite/schema/types";
 
 /** Cap on how many inferred/declared fields we enumerate (mirrors merge-tags BREADTH_CAP breadth). */
 const FIELD_CAP = 50;
@@ -73,10 +69,9 @@ function safeFields(names: string[]): string[] {
  * `index`; appends field tokens resolved from the repeater's binding:
  *
  * - **Content collection** — `items` refs a `{ contentType }` state def. Item shape is `{ id, data: {
- *   …fields }, body }`, so fields come from
- *   `projectConfig.contentTypes[contentType].schema.properties` and emit as `item.data.<f>` (the
- *   `.data.` nesting is LOAD-BEARING — runtime templates use `${item.data.title}`), plus `item.id`
- *   / `item.body`.
+ *   …fields }, body }`, so fields come from `projectConfig.content[contentType].schema.properties`
+ *   and emit as `item.data.<f>` (the `.data.` nesting is LOAD-BEARING — runtime templates use
+ *   `${item.data.title}`), plus `item.id` / `item.body`.
  * - **State array** — `items` refs a state def that is an array of objects. Fields come from a
  *   declared `items.properties`, else are inferred from a sample `default[0]`. Emitted FLAT
  *   (`item.<f>`, no `.data.`).
@@ -104,9 +99,9 @@ export function resolveRepeaterItemFields(
       // (a) Content collection — `{ contentType: "<name>" }`. Import-aliased `$prototype` still
       // Matches because we detect on the `contentType` string, not the prototype name.
       if (typeof def.contentType === "string") {
-        const ct = projectConfig?.contentTypes?.[def.contentType];
-        const schema = ct?.schema as ContentTypeSchema | undefined;
-        const props = schema?.properties;
+        const content = (projectConfig?.content ?? {}) as Record<string, ContentSectionEntry>;
+        const ct = content[def.contentType];
+        const props = ct?.schema?.properties;
         const out = [...base, "item.id", "item.body"];
         if (props && typeof props === "object") {
           for (const f of safeFields(Object.keys(props))) {

package/src/files/files.ts

@@ -34,6 +34,7 @@ import {
   formatForPath,
   loadFormats,
   noFormatError,
+  refreshExtensionUi,
   refreshFormats,
 } from "../format/format-host";
 import { view } from "../view";
@@ -83,6 +84,7 @@ export async function loadProject() {
 
     refreshFormats();
     void loadFormats();
+    refreshExtensionUi(platform);
 
     setProjectState({
       dirs: new Map(),
@@ -145,6 +147,7 @@ export async function openProject({
 
     refreshFormats();
     void loadFormats();
+    refreshExtensionUi(platform);
 
     setProjectState({
       .../** @type {ProjectState} */ projectState,

package/src/format/format-host.ts

@@ -8,6 +8,7 @@
  */
 
 import { getPlatform } from "../platform";
+import type { ExtensionsInfo } from "../types";
 import type { JxMutableNode } from "@jxsuite/schema/types";
 
 export interface StudioFormatHints {
@@ -68,10 +69,12 @@ export function loadFormats(): Promise<StudioFormat[]> {
   return _loaded;
 }
 
-/** Invalidate the cached registry (call on project switch). */
+/** Invalidate the cached registry and extensions payload (call on project switch). */
 export function refreshFormats() {
   _loaded = null;
   _formats = [];
+  _extensionsLoaded = null;
+  _extensions = [];
 }
 
 /** Seed the registry directly (tests and hosts that preload format metadata). */
@@ -80,6 +83,65 @@ export function setFormats(formats: StudioFormat[]) {
   _loaded = Promise.resolve(formats);
 }
 
+// ─── Extensions payload (specs/extensions.md §9/§9.1) ────────────────────────
+
+let _extensions: ExtensionsInfo[] = [];
+let _extensionsLoaded: Promise<ExtensionsInfo[]> | null = null;
+
+/**
+ * Load (and cache) the project's enabled extensions with their project-section contributions.
+ * Backed by the platform's optional `listExtensions` member; platforms without it (or failures)
+ * degrade to an empty list, hiding descriptor-contributed settings sections.
+ */
+export function loadExtensions(): Promise<ExtensionsInfo[]> {
+  if (!_extensionsLoaded) {
+    _extensionsLoaded = (async () => {
+      try {
+        const platform = getPlatform() as {
+          listExtensions?: () => Promise<ExtensionsInfo[]>;
+        };
+        _extensions = (await platform.listExtensions?.()) ?? [];
+      } catch {
+        _extensions = [];
+      }
+      return _extensions;
+    })();
+  }
+  return _extensionsLoaded;
+}
+
+/** The last-loaded extensions payload (synchronous access for render paths). */
+export function getExtensions(): ExtensionsInfo[] {
+  return _extensions;
+}
+
+/** Seed the extensions payload directly (tests and hosts that preload it). */
+export function setExtensions(extensions: ExtensionsInfo[]) {
+  _extensions = extensions;
+  _extensionsLoaded = Promise.resolve(extensions);
+}
+
+/**
+ * Fire-and-forget refresh of the extension-facing editor surface after project (re)activation or an
+ * `extensions` change: Monaco's per-project schemas and the descriptor-contributed settings
+ * sections. Both modules load lazily — monaco is heavy and the settings registry pulls DOM
+ * templates — and both degrade silently (bundled core schemas, built-in sections only).
+ *
+ * @param {object} platform - The studio platform (only `fetchProjectSchemas` is consulted here)
+ */
+export function refreshExtensionUi(platform: {
+  fetchProjectSchemas?: () => Promise<{ project?: unknown; document?: unknown }>;
+}): void {
+  void import("../services/monaco-setup")
+    .then(({ refreshProjectSchemas }) => refreshProjectSchemas(platform))
+    .catch(() => false);
+  void import("../settings/extension-sections")
+    .then(({ syncExtensionSettingsSections }) => syncExtensionSettingsSections())
+    .catch(() => {
+      // Contributed sections also refresh on the next settings-modal open.
+    });
+}
+
 /** The last-loaded registry (synchronous access for render paths). */
 export function getFormats(): StudioFormat[] {
   return _formats;

package/src/new-project/add-repo-modal.ts

@@ -0,0 +1,183 @@
+/// <reference lib="dom" />
+/**
+ * Add Existing Repository modal — a filterable picker over `platform.listRepos` (every repo the
+ * platform's account link can reach, personal and organization). Choosing a repo runs
+ * `platform.importProject`, which adopts it as a Jx project (probes project.json, tags + catalogues
+ * it) and resolves with the catalogue root key; the caller opens it through the same path as a
+ * recent project. Repos without a project.json fail with the backend's structured message, shown
+ * inline.
+ */
+
+import { html, nothing } from "lit-html";
+import { errorMessage } from "@jxsuite/schema/parse";
+import { getPlatform } from "../platform";
+import { openModal } from "../ui/layers";
+import type { RepoInfo } from "../types";
+
+let _handle: ReturnType<typeof openModal> | null = null;
+let _repos: RepoInfo[] | null = null;
+let _filter = "";
+let _error = "";
+/** FullName of the repo currently importing ("" = idle). */
+let _importing = "";
+let _resolve: ((result: { root: string } | null) => void) | null = null;
+
+/** True when the active platform can browse + adopt existing repositories. */
+export function platformSupportsAddRepo(): boolean {
+  const platform = getPlatform();
+  return typeof platform.listRepos === "function" && typeof platform.importProject === "function";
+}
+
+/** Open the picker. Resolves with the imported project's catalogue root key, or null when cancelled. */
+export function openAddRepoModal(): Promise<{ root: string } | null> {
+  if (_handle) {
+    return Promise.resolve(null);
+  }
+  _repos = null;
+  _filter = "";
+  _error = "";
+  _importing = "";
+
+  void getPlatform()
+    .listRepos?.()
+    .then((repos) => {
+      _repos = repos;
+    })
+    .catch((error: unknown) => {
+      _repos = [];
+      _error = errorMessage(error);
+    })
+    .finally(() => {
+      renderModal();
+    });
+
+  return new Promise((resolve) => {
+    _resolve = resolve;
+    renderModal();
+  });
+}
+
+export function closeAddRepoModal() {
+  if (!_handle || _importing) {
+    return;
+  }
+  _handle.close();
+  _handle = null;
+  if (_resolve) {
+    _resolve(null);
+    _resolve = null;
+  }
+}
+
+function finish(result: { root: string }) {
+  _importing = "";
+  if (_handle) {
+    _handle.close();
+    _handle = null;
+  }
+  if (_resolve) {
+    _resolve(result);
+    _resolve = null;
+  }
+}
+
+async function chooseRepo(repo: RepoInfo) {
+  if (_importing) {
+    return;
+  }
+  _importing = repo.fullName;
+  _error = "";
+  renderModal();
+  try {
+    const imported = await getPlatform().importProject?.({ name: repo.name, owner: repo.owner });
+    if (imported) {
+      finish(imported);
+      return;
+    }
+    _error = "This platform cannot import repositories.";
+  } catch (error) {
+    _error = errorMessage(error);
+  }
+  _importing = "";
+  renderModal();
+}
+
+function visibleRepos(): RepoInfo[] {
+  const query = _filter.trim().toLowerCase();
+  const repos = _repos ?? [];
+  return query ? repos.filter((r) => r.fullName.toLowerCase().includes(query)) : repos;
+}
+
+function repoRowTpl(repo: RepoInfo) {
+  return html`
+    <button
+      class="add-repo-row"
+      ?disabled=${Boolean(_importing)}
+      title=${repo.fullName}
+      @click=${() => void chooseRepo(repo)}
+    >
+      <span class="add-repo-name">${repo.fullName}</span>
+      <span class="add-repo-meta">
+        ${repo.isJxProject ? html`<span class="add-repo-badge">Jx</span>` : nothing}
+        ${repo.private ? html`<span class="add-repo-badge">private</span>` : nothing}
+        <span>${repo.defaultBranch} · ${repo.permission}</span>
+      </span>
+      ${_importing === repo.fullName
+        ? html`<span class="add-repo-busy">Importing…</span>`
+        : nothing}
+    </button>
+  `;
+}
+
+function bodyTpl() {
+  if (_repos === null) {
+    return html`<div class="add-repo-empty">Loading repositories…</div>`;
+  }
+  const repos = visibleRepos();
+  if (repos.length === 0) {
+    return html`<div class="add-repo-empty">
+      ${_filter
+        ? "No repositories match the filter."
+        : "No repositories are reachable. Install the GitHub App (or widen its repository access) and try again."}
+    </div>`;
+  }
+  return html`<div class="add-repo-list">${repos.map((repo) => repoRowTpl(repo))}</div>`;
+}
+
+function renderModal() {
+  const tpl = html`
+    <sp-underlay open @close=${closeAddRepoModal}></sp-underlay>
+    <div
+      class="new-project-modal add-repo-modal"
+      @keydown=${(e: KeyboardEvent) => {
+        if (e.key === "Escape") {
+          closeAddRepoModal();
+        }
+      }}
+    >
+      <div class="new-project-modal-header">
+        <h2 class="new-project-modal-title">Add existing repository</h2>
+        <sp-action-button quiet size="s" @click=${closeAddRepoModal} title="Close">
+          <sp-icon-close slot="icon"></sp-icon-close>
+        </sp-action-button>
+      </div>
+      <div class="new-project-modal-body">
+        <sp-textfield
+          class="add-repo-filter"
+          placeholder="Filter repositories…"
+          value=${_filter}
+          @input=${(e: Event) => {
+            _filter = (e.target as HTMLInputElement).value;
+            renderModal();
+          }}
+        ></sp-textfield>
+        ${bodyTpl()} ${_error ? html`<div class="new-project-error">${_error}</div>` : nothing}
+      </div>
+    </div>
+  `;
+  if (_handle) {
+    _handle.update(tpl);
+  } else {
+    _handle = openModal(tpl);
+  }
+}

package/src/new-project/new-project-modal.ts

@@ -13,6 +13,7 @@ import { html } from "lit-html";
 import { errorMessage } from "@jxsuite/schema/parse";
 import { openModal } from "../ui/layers";
 import { getPlatform } from "../platform";
+import { installUrlOf } from "../platform-errors";
 import { hasOpenAiKey } from "../services/ai-settings";
 import { setPendingAgentPrompt } from "../services/agent-seed";
 import { createAiCredentialsForm } from "../ui/ai-credentials-form";
@@ -57,6 +58,14 @@ let _paramsSeededFor = "";
 
 let _error = "";
 
+/** GitHub-App install link carried by a structured needs_installation_access failure. */
+let _errorInstallUrl = "";
+
+function captureError(error: unknown) {
+  _error = errorMessage(error);
+  _errorInstallUrl = installUrlOf(error) ?? "";
+}
+
 let _creating = false;
 
 /** Starter templates offered in the picker (empty until loaded / on platforms without starters). */
@@ -111,6 +120,7 @@ export function openNewProjectModal(): Promise<{
   _agentPrompt = "";
   _paramsSeededFor = "";
   _error = "";
+  _errorInstallUrl = "";
   _creating = false;
   _starters = [];
   _dirDerived = true;
@@ -320,7 +330,7 @@ function renderModal() {
       finish(result);
     } catch (error) {
       _creating = false;
-      _error = errorMessage(error);
+      captureError(error);
       renderModal();
     }
   };
@@ -351,7 +361,7 @@ function renderModal() {
       finish(result);
     } catch (error) {
       _creating = false;
-      _error = errorMessage(error);
+      captureError(error);
       renderModal();
     }
   };
@@ -593,7 +603,16 @@ function renderModal() {
         : ""}
       <div class="new-project-modal-body">
         ${bodyTpl()}
-        ${_tab !== "import" && _error ? html`<div class="new-project-error">${_error}</div>` : ""}
+        ${_tab !== "import" && _error
+          ? html`<div class="new-project-error">
+              ${_error}
+              ${_errorInstallUrl
+                ? html`<a href=${_errorInstallUrl} target="_blank" rel="noreferrer">
+                    Install the Jx Suite GitHub App →
+                  </a>`
+                : ""}
+            </div>`
+          : ""}
       </div>
       <div class="new-project-modal-footer">${footerTpl()}</div>
     </div>