@jxsuite/studio 4.1.0 → 5.1.0

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

@@ -17,12 +17,29 @@
  * While gated they offer the same two paths as the assistant sidebar: connect Cloudflare for
  * Workers AI, or bring a key.
  *
+ * **The dialog is a document.** `surfaces/new-project.json` draws it and `surfaces/new-project.ts`
+ * mounts it; this module keeps the flow, the platform calls and the promise. What it used to be is
+ * worth recording, because it is the shape every converted surface starts from: one lit template
+ * re-rendered from module state on every keystroke, inside a fixed card that painted its own panel
+ * beside an `<sp-underlay>`, drew its own header and close button, and needed `z-index: 1000` to
+ * climb back out from under its own scrim. A modal `<dialog>` is in the top layer by construction,
+ * so none of that stacking is left to get wrong, and a keystroke in the name field now moves one
+ * binding rather than rebuilding both steps.
+ *
+ * **`closeNewProjectModal` went with it**, exactly as `closeAddRepoModal` did. It existed because
+ * the lit card had to answer its own Escape key, its own underlay click and its own close button,
+ * and all three of those belong to the platform now: every way out raises the dialog's `cancel`,
+ * which arrives here as `onClosed`. Its one piece of judgement went with it too — it refused to
+ * close while a create was in flight — and that refusal was already unenforceable on this
+ * substrate, because nothing may refuse Escape on a modal `<dialog>`. A create that outlives its
+ * dialog still finishes and still initialises the repository; the promise has already resolved
+ * `null`, so what the caller loses is the hand-off, not the project.
+ *
  * @docs studio/projects/create
  */
 
-import { html } from "lit-html";
 import { errorMessage } from "@jxsuite/schema/parse";
-import { openModal } from "../ui/layers";
+import { layerHost } from "../ui/layers";
 import { enumArg, enumProperty } from "../commands/command-args";
 import type { AnyCommand, CommandRegistry } from "../commands/registry";
 import { getPlatform } from "../platform";
@@ -33,27 +50,50 @@ import { initProjectRepo } from "../files/files";
 import { runImportHandoff } from "../services/import-seed";
 import { createAiCredentialsForm } from "../ui/ai-credentials-form";
 import { createManagedConnect } from "../ui/ai-managed-connect";
+import { openNewProjectSurface } from "../surfaces/new-project";
 import {
+  browseLocation,
   collectDestination,
   loadLocationOptions,
-  renderLocationFields,
+  locationView,
   resetLocationFields,
+  setLocationOwner,
+  setLocationParent,
+  setLocationVisibility,
 } from "./location-fields";
 import {
   handoffImport,
   importButtonLabel,
-  renderImportSource,
+  importModelHost,
+  importView,
   resetImportTab,
+  setBreakpointCount,
+  setBreakpointMode,
+  setBreakpointRounding,
+  setBreakpointWidths,
+  setImportAiNaming,
+  setImportDepth,
+  setImportMaxPages,
+  setImportMinFidelity,
+  setImportPrompt,
+  setImportUrl,
+  setImportVerify,
   validateImportSource,
 } from "./import-tab";
 import type { ProjectConfig } from "@jxsuite/schema/types";
 import type { CreateProjectDestination, StarterInfo } from "../types";
 import type { ImportTabCtx } from "./import-tab";
+import type {
+  NewProjectBody,
+  NewProjectCard,
+  NewProjectSurfaceHandle,
+  NewProjectView,
+} from "../surfaces/new-project";
 
 type NewProjectTab = (typeof NEW_PROJECT_TABS)[number];
 type WizardStep = "source" | "params";
 
-let _handle: ReturnType<typeof openModal> | null = null;
+let _handle: NewProjectSurfaceHandle | null = null;
 
 let _form = { directory: "", name: "" };
 
@@ -81,15 +121,6 @@ function captureError(error: unknown) {
   _errorInstallUrl = installUrlOf(error) ?? "";
 }
 
-/** After a failed submit, bring the params step back to the top and focus the name field. */
-function focusNameField() {
-  requestAnimationFrame(() => {
-    const body = document.querySelector(".new-project-modal-body");
-    body?.scrollTo?.(0, 0);
-    body?.querySelector<HTMLElement>("sp-textfield")?.focus?.();
-  });
-}
-
 let _creating = false;
 
 /** Starter templates offered in the gallery (empty until loaded / on platforms without starters). */
@@ -97,13 +128,15 @@ let _starters: StarterInfo[] = [];
 
 let _resolve: ((result: { root: string; config: ProjectConfig } | null) => void) | null = null;
 
+let _dirDerived = true;
+
 // One credentials form shared by the Import and Agent gates; lazy so the modal module can load
 // Before a platform is registered (the form fetches models through the platform on edit).
 let _credsForm: ReturnType<typeof createAiCredentialsForm> | null = null;
 
 function rerenderIfOpen() {
   if (_handle) {
-    renderModal();
+    redraw();
   }
 }
 
@@ -171,11 +204,7 @@ export function openNewProjectModal(options?: { tab?: NewProjectTab }): Promise<
   // Load the destination options (repo-mode owners) and starter templates in the background,
   // Re-rendering when they arrive. A platform without starters shows the scratch card alone.
   const platform = getPlatform();
-  loadLocationOptions(() => {
-    if (_handle) {
-      renderModal();
-    }
-  });
+  loadLocationOptions(rerenderIfOpen);
   if (platform.listStarters) {
     void platform
       .listStarters()
@@ -185,9 +214,7 @@ export function openNewProjectModal(options?: { tab?: NewProjectTab }): Promise<
         if (!_starterTouched) {
           _starter = starters[0]?.id ?? "";
         }
-        if (_handle) {
-          renderModal();
-        }
+        rerenderIfOpen();
       })
       .catch(() => {
         /* Non-fatal: the gallery keeps the scratch card. */
@@ -196,37 +223,107 @@ export function openNewProjectModal(options?: { tab?: NewProjectTab }): Promise<
 
   return new Promise((resolve) => {
     _resolve = resolve;
-    renderModal();
+    _handle = openNewProjectSurface({
+      actions: {
+        browse: () => {
+          void browseLocation(rerenderIfOpen);
+        },
+        /* Escape, the Cancel button, a click on the backdrop and a programmatic close all arrive
+           here, and all of them mean the same thing: nothing was created. A native `<dialog>` has
+           already closed by the time it says so, which is why this settles rather than deciding
+           whether to allow it — a create still in flight is dropped on the way out, exactly as a
+           starter list that lands after a dismissal is. */
+        closed: () => {
+          settle(null);
+        },
+        confirm,
+        pickCard: selectStarter,
+        pickTab: (value) => {
+          if (_creating) {
+            return;
+          }
+          _tab = value as NewProjectTab;
+          _error = "";
+          redraw();
+        },
+        secondary: goBack,
+        setAgentPrompt: (value) => {
+          _agentPrompt = value;
+        },
+        setAiNaming: setImportAiNaming,
+        setBreakpointCount,
+        setBreakpointMode: (value) => {
+          setBreakpointMode(value);
+          redraw();
+        },
+        setBreakpointRounding,
+        setBreakpointWidths,
+        setDepth: setImportDepth,
+        setImportPrompt,
+        setMaxPages: setImportMaxPages,
+        setMinFidelity: setImportMinFidelity,
+        setName,
+        setOwner: (value) => {
+          setLocationOwner(value);
+          redraw();
+        },
+        setParent: (value) => {
+          setLocationParent(value);
+          redraw();
+        },
+        setSlug,
+        setUrl: (value) => {
+          setImportUrl(importCtx(), value);
+          redraw();
+        },
+        setVerify: (on) => {
+          setImportVerify(on);
+          // The bar below it only means anything while the check runs, so it appears with it.
+          redraw();
+        },
+        setVisibility: (value) => {
+          setLocationVisibility(value);
+          redraw();
+        },
+      },
+      islands: {
+        creds: () => credsForm().render(),
+        managed: () => managedConnect().render(),
+        model: () => importModelHost(),
+      },
+      layer: layerHost("dialog"),
+      view: viewOf(),
+    });
   });
 }
 
+/** Push the current state at the surface — a no-op once the dialog is gone. */
+function redraw(): void {
+  _handle?.update(viewOf());
+}
+
 /**
- * Dismiss the wizard. Available from every step, and from the underlay and Escape — a running
- * import is aborted on the way out rather than trapping the user behind it.
+ * Resolve the promise once, and take the dialog down with it.
+ *
+ * The promise is resolved BEFORE the dialog is closed, and the order is load-bearing rather than
+ * tidy: closing raises the platform's own `close`, which arrives back here as a dismissal, so a
+ * `settle` that closed first would resolve a created project's promise with `null` a frame after
+ * the create succeeded. Clearing `_handle` and `_resolve` first is what makes that second pass a
+ * no-op.
  */
-export function closeNewProjectModal() {
-  if (!_handle || _creating) {
-    return;
-  }
-  _handle.close();
+function settle(result: { root: string; config: ProjectConfig } | null): void {
+  const handle = _handle;
+  const resolve = _resolve;
   _handle = null;
-  if (_resolve) {
-    _resolve(null);
-    _resolve = null;
-  }
+  _resolve = null;
+  _creating = false;
+  resolve?.(result);
+  handle?.close();
 }
 
-/** Close the modal and resolve its promise with a created/imported project. */
+/** Close the wizard and resolve its promise with a created/imported project. */
 function finish(result: { root: string; config: ProjectConfig } | null) {
-  _creating = false;
-  if (_handle) {
-    _handle.close();
-    _handle = null;
-  }
-  if (_resolve) {
-    _resolve(result);
-    _resolve = null;
-  }
+  settle(result);
 }
 
 /**
@@ -266,13 +363,10 @@ function sourceLabel(): string {
   }
 }
 
-/** The import tab's context object — rebuilt per render so it closes over current state. */
-function importCtxFor(rerender: () => void): ImportTabCtx {
+/** The import tab's context object — rebuilt per use so it closes over current state. */
+function importCtx(): ImportTabCtx {
   return {
-    aiGateOpen,
-    credsForm: credsForm(),
     form: _form,
-    managedConnect: managedConnect(),
     /* The wizard creates nothing on this path. `import_site` is `no-project` tiered and does the
        creating — including the git init every create path owes (`specs/desktop.md` §4.5), which
        moved into `adoptCreatedProject` with it. The modal resolves `null`, the same as a dismissal,
@@ -281,7 +375,7 @@ function importCtxFor(rerender: () => void): ImportTabCtx {
       finish(null);
       void runImportHandoff(brief);
     },
-    rerender,
+    rerender: redraw,
     resolveDestination: () => validateParams(),
   };
 }
@@ -294,8 +388,8 @@ function importCtxFor(rerender: () => void): ImportTabCtx {
 function validateParams(): CreateProjectDestination | null {
   if (!_form.name.trim()) {
     _nameError = "Project name is required";
-    renderModal();
-    focusNameField();
+    redraw();
+    _handle?.focusName();
     return null;
   }
   if (!_form.directory.trim()) {
@@ -304,337 +398,255 @@ function validateParams(): CreateProjectDestination | null {
   const destination = collectDestination(_form.directory);
   if (!destination) {
     _nameError = "";
-    renderModal();
-    focusNameField();
+    redraw();
+    _handle?.focusName();
     return null;
   }
   return destination;
 }
 
-function renderModal() {
-  const platform = getPlatform();
-  const importCtx = importCtxFor(renderModal);
-
-  const onInput = (field: "name" | "directory") => (e: Event) => {
-    _form[field] = (e.target as HTMLInputElement).value;
-    if (field === "name") {
-      _nameError = "";
-      // Auto-derive the directory slug from the name while the user hasn't typed one.
-      if (!_form.directory) {
-        _dirDerived = true;
-      }
-      if (_dirDerived) {
-        _form.directory = deriveSlug(_form.name);
-      }
-    } else {
-      _dirDerived = false;
-    }
-    renderModal();
-  };
+// ─── What the reader can do ───────────────────────────────────────────────────
 
-  const selectStarter = (id: string) => {
-    _starter = id;
-    _starterTouched = true;
-    _error = "";
-    renderModal();
-  };
+function setName(value: string): void {
+  _form.name = value;
+  _nameError = "";
+  // Auto-derive the directory slug from the name while the user hasn't typed one.
+  if (!_form.directory) {
+    _dirDerived = true;
+  }
+  if (_dirDerived) {
+    _form.directory = deriveSlug(_form.name);
+  }
+  redraw();
+}
 
-  const onTabChange = (e: Event) => {
-    if (_creating) {
-      return;
-    }
-    _tab = (e.target as HTMLElement & { selected: string }).selected as NewProjectTab;
-    _error = "";
-    renderModal();
-  };
+function setSlug(value: string): void {
+  _form.directory = value;
+  _dirDerived = false;
+  redraw();
+}
 
-  // ─── Step transitions ──────────────────────────────────────────────────────
+function selectStarter(id: string): void {
+  _starter = id;
+  _starterTouched = true;
+  _error = "";
+  redraw();
+}
 
-  const goNext = () => {
-    if (_tab === "import" && !validateImportSource(importCtx)) {
-      return;
-    }
-    if (_tab === "agent" && !_agentPrompt.trim()) {
-      _error = "Describe the site you want the agent to build";
-      renderModal();
-      return;
-    }
-    _step = "params";
-    _error = "";
-    renderModal();
-  };
+/** The primary button: Next on the source step, the create or the hand-off on the second. */
+function confirm(): void {
+  if (_step === "source") {
+    goNext();
+    return;
+  }
+  if (_tab === "import") {
+    handoffImport(importCtx());
+    return;
+  }
+  /* The dialog's footer has no disabled state to give its primary (`ui.md` §5.1), so the label
+     says "Creating…" and the refusal lives here. A second press during a create must not start a
+     second one. */
+  if (_creating) {
+    return;
+  }
+  if (_tab === "agent") {
+    void create({ template: "blank" }, async (result) => {
+      // The window that opens the project consumes this and hands the prompt to the assistant.
+      setPendingAgentPrompt(result.root, _agentPrompt.trim());
+      await finishCreated(result);
+    });
+    return;
+  }
+  void create(_starter ? { starter: _starter } : { template: "blank" }, finishCreated);
+}
 
-  const goBack = () => {
-    if (_creating) {
-      return;
-    }
-    _step = "source";
-    _error = "";
-    _nameError = "";
-    renderModal();
-  };
+function goNext(): void {
+  if (_tab === "import" && !validateImportSource(importCtx())) {
+    return;
+  }
+  if (_tab === "agent" && !_agentPrompt.trim()) {
+    _error = "Describe the site you want the agent to build";
+    redraw();
+    return;
+  }
+  _step = "params";
+  _error = "";
+  redraw();
+}
 
-  // ─── Submission ────────────────────────────────────────────────────────────
+function goBack(): void {
+  if (_creating) {
+    return;
+  }
+  _step = "source";
+  _error = "";
+  _nameError = "";
+  redraw();
+}
 
-  /** Create the project from the chosen source, then run `after` with the result. */
-  const create = async (
-    source: { starter: string } | { template: string },
-    after: (result: { root: string; config: ProjectConfig }) => void | Promise<void>,
-  ) => {
-    const destination = validateParams();
-    if (!destination) {
-      return;
-    }
+/** Create the project from the chosen source, then run `after` with the result. */
+async function create(
+  source: { starter: string } | { template: string },
+  after: (result: { root: string; config: ProjectConfig }) => void | Promise<void>,
+): Promise<void> {
+  const destination = validateParams();
+  if (!destination) {
+    return;
+  }
 
-    _creating = true;
-    _error = "";
-    _nameError = "";
-    renderModal();
-
-    try {
-      const result = await getPlatform().createProject({ ..._form, destination, ...source });
-      await after(result);
-    } catch (error) {
-      _creating = false;
-      captureError(error);
-      renderModal();
-    }
-  };
+  _creating = true;
+  _error = "";
+  _nameError = "";
+  redraw();
+
+  try {
+    const result = await getPlatform().createProject({ ..._form, destination, ...source });
+    await after(result);
+  } catch (error) {
+    _creating = false;
+    captureError(error);
+    redraw();
+  }
+}
 
-  const onSubmit = () =>
-    create(_starter ? { starter: _starter } : { template: "blank" }, finishCreated);
+// ─── The projection ───────────────────────────────────────────────────────────
 
-  const onAgentSubmit = () =>
-    create({ template: "blank" }, async (result) => {
-      // The window that opens the project consumes this and hands the prompt to the assistant.
-      setPendingAgentPrompt(result.root, _agentPrompt.trim());
-      await finishCreated(result);
-    });
+/** Which body the document draws: the two closed gates are one sentence with two texts. */
+function bodyOf(): NewProjectBody {
+  if (_step === "params") {
+    return "params";
+  }
+  if (_tab === "import") {
+    return aiGateOpen() ? "import" : "gate";
+  }
+  if (_tab === "agent") {
+    return aiGateOpen() ? "agent" : "gate";
+  }
+  return "starter";
+}
 
-  // ─── Step 1: source selection ──────────────────────────────────────────────
-
-  const starterSourceTpl = () => html`
-    <div class="new-project-tab-intro">
-      Every starter is a complete site copied in as plain files you own — open it, look at it, then
-      make it yours.
-    </div>
-    <div class="new-project-templates">
-      ${_starters.map(
-        (s) => html`
-          <button
-            type="button"
-            class="new-project-template ${_starter === s.id ? "selected" : ""}"
-            @click=${() => selectStarter(s.id)}
-            title=${s.description}
-          >
-            <img class="new-project-template-thumb" src=${s.thumbnail} alt="" />
-            <div class="new-project-template-body">
-              <div class="new-project-template-name">${s.name}</div>
-              <div class="new-project-template-tag">${s.tagline}</div>
-            </div>
-          </button>
-        `,
-      )}
-      <button
-        type="button"
-        class="new-project-template new-project-scratch ${_starter === "" ? "selected" : ""}"
-        @click=${() => selectStarter("")}
-      >
-        <div class="new-project-template-blank">+</div>
-        <div class="new-project-template-body">
-          <div class="new-project-template-name">Start from scratch</div>
-          <div class="new-project-template-tag">An empty site with one page</div>
-        </div>
-      </button>
-    </div>
-  `;
-
-  const agentSourceTpl = () => {
-    if (!aiGateOpen()) {
-      return html`
-        <div class="new-project-tab-intro">
-          The agent uses your AI provider to build the site.
-          ${
-            managedConnect().canOffer()
-              ? "Connect Cloudflare, or add an OpenAI-compatible API key, to continue."
-              : "Add an OpenAI-compatible API key to continue."
-          }
-        </div>
-        <div class="new-project-creds">${managedConnect().render()} ${credsForm().render()}</div>
-      `;
-    }
-    return html`
-      <div class="new-project-tab-intro">
-        Describe the site you want; the assistant builds it in the editor while you watch.
-      </div>
-      <label class="new-project-field">
-        <span class="new-project-label">Prompt *</span>
-        <sp-textfield
-          multiline
-          class="new-project-agent-prompt"
-          placeholder="A landing page for a small coffee roastery with a menu and contact form…"
-          .value=${_agentPrompt}
-          @input=${(e: Event) => {
-            _agentPrompt = (e.target as HTMLInputElement).value;
-          }}
-          style="width: 100%"
-        ></sp-textfield>
-      </label>
-    `;
-  };
+/** The sentence above a closed gate. Both tabs need working AI; they need it for different work. */
+function gateIntro(): string {
+  const remedy = managedConnect().canOffer()
+    ? "Connect Cloudflare, or add an OpenAI-compatible API key, to continue."
+    : "Add an OpenAI-compatible API key to continue.";
+  return _tab === "import"
+    ? `Importing uses an AI-guided pipeline to clone an existing site. ${remedy}`
+    : `The agent uses your AI provider to build the site. ${remedy}`;
+}
 
-  const sourceBodyTpl = () => {
-    switch (_tab) {
-      case "import": {
-        return renderImportSource(importCtx);
-      }
-      case "agent": {
-        return agentSourceTpl();
-      }
-      default: {
-        return starterSourceTpl();
-      }
-    }
-  };
+/** The primary button's text, or `""` where there is nothing to press. */
+function confirmLabel(): string {
+  if (_step === "source") {
+    return bodyOf() === "gate" ? "" : "Next";
+  }
+  if (_tab === "import") {
+    return importButtonLabel();
+  }
+  if (_creating) {
+    return "Creating…";
+  }
+  return _tab === "agent" ? "Create & Start Agent" : "Create Project";
+}
 
-  // ─── Step 2: name + location ───────────────────────────────────────────────
-
-  const paramsBodyTpl = () => html`
-    <div class="new-project-step-context">${sourceLabel()}</div>
-    <label class="new-project-field">
-      <span class="new-project-label">Project Name *</span>
-      <sp-textfield
-        class="new-project-name"
-        placeholder="My Site"
-        .value=${_form.name}
-        ?invalid=${Boolean(_nameError)}
-        @input=${onInput("name")}
-        style="width: 100%"
-      >
-        ${
-          _nameError
-            ? html`<sp-help-text slot="negative-help-text">${_nameError}</sp-help-text>`
-            : ""
-        }
-      </sp-textfield>
-    </label>
-
-    ${renderLocationFields({
-      onSlugInput: onInput("directory"),
-      rerender: renderModal,
-      slug: _form.directory,
-    })}
-    ${
-      _tab === "import"
-        ? html`
-            <div class="new-project-tab-intro">
-              The assistant runs the import and reports as it goes — this dialog closes as soon as
-              it starts.
-            </div>
-          `
-        : html`
-            <div class="new-project-tab-intro">
-              The site's address, deployment target and design tokens are project settings — set
-              them from Settings once the project is open.
-            </div>
-          `
-    }
-  `;
-
-  // ─── Footer ────────────────────────────────────────────────────────────────
-
-  const footerTpl = () => {
-    const cancel = html`
-      <sp-button variant="secondary" ?disabled=${_creating} @click=${closeNewProjectModal}>
-        Cancel
-      </sp-button>
-    `;
-    if (_step === "source") {
-      const gated = (_tab === "import" || _tab === "agent") && !aiGateOpen();
-      return html`
-        ${cancel}
-        ${gated ? "" : html`<sp-button variant="accent" @click=${goNext}>Next</sp-button>`}
-      `;
-    }
-    const primary =
+/** The gallery: every starter the platform ships, then the one card that is not a starter. */
+function cardsOf(): NewProjectCard[] {
+  const cards: NewProjectCard[] = _starters.map((starter) => ({
+    art: "thumb",
+    id: starter.id,
+    name: starter.name,
+    selected: _starter === starter.id,
+    tagline: starter.tagline,
+    thumbnail: starter.thumbnail,
+    title: starter.description,
+  }));
+  cards.push({
+    art: "blank",
+    id: "",
+    name: "Start from scratch",
+    selected: _starter === "",
+    tagline: "An empty site with one page",
+    thumbnail: "",
+    title: "",
+  });
+  return cards;
+}
+
+/**
+ * Everything the dialog draws, as one record. The only place this module's state becomes a view.
+ *
+ * The two sub-forms are asked for their own projections and copied out field by field rather than
+ * spread: each of them calls its refusal `error`, and so does this one, and three refusals with one
+ * name is exactly the kind of collision a spread resolves silently and in the wrong order.
+ */
+function viewOf(): NewProjectView {
+  const platform = getPlatform();
+  const location = locationView(_form.directory);
+  const fields = importView(importCtx());
+  return {
+    agentPrompt: _agentPrompt,
+    aiNaming: fields.aiNaming,
+    body: bodyOf(),
+    breakpointCount: fields.breakpointCount,
+    breakpointHint: fields.breakpointHint,
+    breakpointMode: fields.breakpointMode,
+    breakpointModes: fields.breakpointModes,
+    breakpointRounding: fields.breakpointRounding,
+    breakpointWidths: fields.breakpointWidths,
+    browseLabel: location.browseLabel,
+    browsing: location.browsing,
+    canBrowse: location.canBrowse,
+    canVerify: fields.canVerify,
+    cards: cardsOf(),
+    confirmLabel: confirmLabel(),
+    contextLabel: sourceLabel(),
+    depth: fields.depth,
+    destination: location.destination,
+    destinationError: location.error,
+    error: _error,
+    errorInstallUrl: _errorInstallUrl,
+    gateIntro: gateIntro(),
+    headline: _step === "source" ? "Choose a starting point" : "Name your project",
+    importError: fields.error,
+    importPrompt: fields.prompt,
+    maxBreakpoints: fields.maxBreakpoints,
+    maxDepth: fields.maxDepth,
+    maxPages: fields.maxPages,
+    minFidelity: fields.minFidelity,
+    name: _form.name,
+    nameError: _nameError,
+    note:
       _tab === "import"
-        ? html`
-            <sp-button variant="accent" @click=${() => handoffImport(importCtx)}>
-              ${importButtonLabel()}
-            </sp-button>
-          `
-        : _tab === "agent"
-          ? html`
-              <sp-button variant="accent" ?disabled=${_creating} @click=${onAgentSubmit}>
-                ${_creating ? "Creating…" : "Create & Start Agent"}
-              </sp-button>
-            `
-          : html`
-              <sp-button variant="accent" ?disabled=${_creating} @click=${onSubmit}>
-                ${_creating ? "Creating…" : "Create Project"}
-              </sp-button>
-            `;
-    return html`
-      ${cancel}
-      <sp-button variant="secondary" ?disabled=${_creating} @click=${goBack}>Back</sp-button>
-      ${primary}
-    `;
+        ? "The assistant runs the import and reports as it goes — this dialog closes as soon as it starts."
+        : "The site's address, deployment target and design tokens are project settings — set them from Settings once the project is open.",
+    owner: location.owner,
+    owners: location.owners,
+    parent: location.parent,
+    parentPlaceholder: location.parentPlaceholder,
+    preview: location.preview,
+    previewLabel: location.previewLabel,
+    repoTaken: location.repoTaken,
+    roundings: fields.roundings,
+    secondaryLabel: _step === "params" ? "Back" : "",
+    showTabs: _step === "source",
+    slug: _form.directory,
+    slugLabel: location.slugLabel,
+    tab: _tab,
+    tabs: [
+      { label: "Starters", value: "starter" },
+      ...(platform.importSite ? [{ label: "Import", value: "import" }] : []),
+      { label: "Agent", value: "agent" },
+    ],
+    url: fields.url,
+    verify: fields.verify,
+    visibilities: [
+      { label: "Private", value: "private" },
+      { label: "Public", value: "public" },
+    ],
+    visibility: location.visibility,
   };
-
-  const bodyTpl = () => (_step === "source" ? sourceBodyTpl() : paramsBodyTpl());
-
-  const tpl = html`
-    <sp-underlay open @close=${closeNewProjectModal}></sp-underlay>
-    <div class="new-project-modal" data-jx-region="overlay.dialog:new-project">
-      <div class="new-project-modal-header">
-        <h2 class="new-project-modal-title">
-          ${_step === "source" ? "Choose a starting point" : "Name your project"}
-        </h2>
-        <sp-action-button quiet size="s" @click=${closeNewProjectModal} title="Close">
-          <sp-icon-close slot="icon"></sp-icon-close>
-        </sp-action-button>
-      </div>
-      ${
-        _step === "source"
-          ? html`
-              <div class="new-project-tabs">
-                <sp-tabs selected=${_tab} quiet @change=${onTabChange}>
-                  <sp-tab value="starter" label="Starters"></sp-tab>
-                  ${platform.importSite ? html`<sp-tab value="import" label="Import"></sp-tab>` : ""}
-                  <sp-tab value="agent" label="Agent"></sp-tab>
-                </sp-tabs>
-              </div>
-            `
-          : ""
-      }
-      <div class="new-project-modal-body">${bodyTpl()}</div>
-      ${
-        _tab !== "import" && _error
-          ? html`<div class="new-project-error new-project-error--global">
-              ${_error}
-              ${
-                _errorInstallUrl
-                  ? html`<a href=${_errorInstallUrl} target="_blank" rel="noreferrer">
-                      Install the Jx Suite GitHub App →
-                    </a>`
-                  : ""
-              }
-            </div>`
-          : ""
-      }
-      <div class="new-project-modal-footer">${footerTpl()}</div>
-    </div>
-  `;
-
-  if (!_handle) {
-    _handle = openModal(tpl, { label: "New Project", onDismiss: closeNewProjectModal });
-  } else {
-    _handle.update(tpl);
-  }
 }
 
-let _dirDerived = true;
-
 // ─── Commands ─────────────────────────────────────────────────────────────────
 
 /** The wizard's source tabs, in strip order — the declared values of `project.new`'s `tab`. */
@@ -667,11 +679,8 @@ export function newProjectCommands(): AnyCommand[] {
       level: "application",
       menus: ["commandbar/overflow", "palette"],
       group: "1_file",
-      aiTool: {
-        description:
-          "Open the New Project wizard, optionally on the Starters, Import or Agent tab.",
-        name: "open_new_project",
-      },
+      /* No `aiTool`: application-level, refused at registration; it opens the wizard, and the
+         model's own door is `create_project` / `import_site` (§12.4). */
       run: (_commandCtx, args) => {
         const tab =
           (args as { tab?: unknown }).tab === undefined