@jxsuite/studio 0.34.0 → 0.36.0

package/src/platforms/devserver.ts

@@ -8,8 +8,16 @@
  * See spec/desktop.md §8 for the full specification.
  */
 
+import { streamImport } from "../services/import-client";
 import type { ProjectConfig } from "@jxsuite/schema/types";
-import type { DirEntry, FsEvent, RenameResult } from "../types";
+import type {
+  DirEntry,
+  FsEvent,
+  ImportProgressEvent,
+  ImportSiteOptions,
+  RenameResult,
+  StarterInfo,
+} from "../types";
 
 /** A directory entry from the server, tolerating extra wire fields. */
 type WireDirEntry = DirEntry & Record<string, unknown>;
@@ -215,6 +223,9 @@ export function createDevServerPlatform() {
       url?: string;
       adapter?: string;
       directory: string;
+      starter?: string;
+      template?: string;
+      design?: Record<string, unknown>;
     }) {
       const res = await fetch("/__studio/create-project", {
         body: JSON.stringify(opts),
@@ -228,6 +239,24 @@ export function createDevServerPlatform() {
       return await res.json();
     },
 
+    /** List starter templates from the dev server. */
+    async listStarters(): Promise<StarterInfo[]> {
+      const res = await fetch("/__studio/starters");
+      if (!res.ok) {
+        throw new Error("Failed to load starters");
+      }
+      return await readJson<StarterInfo[]>(res);
+    },
+
+    /** AI-guided site import: NDJSON progress stream from the dev server's import endpoint. */
+    async importSite(
+      opts: ImportSiteOptions,
+      onProgress: (evt: ImportProgressEvent) => void,
+      signal?: AbortSignal,
+    ) {
+      return await streamImport("/__studio/import-site", opts, onProgress, signal);
+    },
+
     // ─── File operations ──────────────────────────────────────────────────
 
     /** @param {string} dir */
@@ -808,6 +837,76 @@ export function createDevServerPlatform() {
       }
     },
 
+    // ─── Cloudflare publish surface (token-backed; see services/cf-settings) ─
+
+    /**
+     * Allowlisted Cloudflare API passthrough. The token comes from the client's cf-settings store
+     * and rides in a header to the same-origin proxy (api.cloudflare.com is not CORS-enabled).
+     */
+    async cfApi(apiPath: string, init?: { method?: string; body?: unknown }) {
+      const { getCfToken } = await import("../services/cf-settings");
+      const token = getCfToken();
+      if (!token) {
+        throw new Error("No Cloudflare API token configured");
+      }
+      const res = await fetch("/__studio/cf/proxy", {
+        method: "POST",
+        headers: { "Content-Type": "application/json", "X-CF-Token": token },
+        body: JSON.stringify({ path: apiPath, method: init?.method ?? "GET", body: init?.body }),
+      });
+      const envelope = (await res.json()) as {
+        success?: boolean;
+        result?: unknown;
+        errors?: { message: string }[];
+        error?: string;
+      };
+      if (!res.ok || envelope.success === false) {
+        const message =
+          envelope.errors?.map((e) => e.message).join("; ") ?? envelope.error ?? res.statusText;
+        throw new Error(`Cloudflare API: ${message}`);
+      }
+      return envelope.result ?? envelope;
+    },
+
+    /** Verify the stored token by listing accounts; null when none/invalid. */
+    async cfConnection() {
+      const { getCfAccountId, getCfToken, setCfAccountId } =
+        await import("../services/cf-settings");
+      if (!getCfToken()) {
+        return null;
+      }
+      try {
+        const accounts = (await this.cfApi?.("/accounts")) as { id: string; name: string }[];
+        if (!accounts?.length) {
+          return { connected: false };
+        }
+        const chosen = accounts.find((a) => a.id === getCfAccountId()) ?? accounts[0]!;
+        setCfAccountId(chosen.id);
+        return { connected: true, accountId: chosen.id, accountName: chosen.name };
+      } catch {
+        return { connected: false };
+      }
+    },
+
+    // ─── Project catalogue ──────────────────────────────────────────────────
+
+    /** Every site under the server root, from the /__studio/sites glob. */
+    async listProjects() {
+      const res = await fetch("/__studio/sites");
+      if (!res.ok) {
+        return [];
+      }
+      const sites = await readJson<SiteEntry[]>(res);
+      return sites.map((site) => {
+        const config = site.config as { name?: string } | null;
+        return {
+          name: config?.name || site.path.split("/").at(-1) || site.path,
+          root: site.path,
+          description: site.path,
+        };
+      });
+    },
+
     // ─── AI Assistant (Stack B: OpenAI-compatible SSE proxy) ───────────────────
 
     aiChatUrl() {

package/src/project-list.ts

@@ -0,0 +1,38 @@
+/**
+ * Project catalogue — a synchronous render cache over the optional `platform.listProjects` PAL
+ * member (dev server sites, cloud platforms). Hydrated once at boot (studio.ts) like the
+ * recent-projects cache; the welcome screen reads it synchronously.
+ */
+import { getPlatform, hasPlatform } from "./platform";
+import type { ProjectListEntry } from "./types";
+
+let cache: ProjectListEntry[] = [];
+
+/** True when the active platform exposes a project catalogue. */
+export function platformListsProjects(): boolean {
+  return hasPlatform() && typeof getPlatform().listProjects === "function";
+}
+
+/** Refresh the cache from the platform; resolves to [] when unsupported or failing. */
+export async function hydrateProjectList(): Promise<void> {
+  if (!platformListsProjects()) {
+    cache = [];
+    return;
+  }
+  try {
+    cache = (await getPlatform().listProjects?.()) ?? [];
+  } catch {
+    // Catalogue is progressive enhancement; a failed fetch leaves the section hidden.
+    cache = [];
+  }
+}
+
+/** Synchronous snapshot for render paths (never awaits). */
+export function getProjectList(): ProjectListEntry[] {
+  return cache;
+}
+
+/** Reset seam for tests. */
+export function resetProjectList(): void {
+  cache = [];
+}

package/src/publish/pages-service.ts

@@ -0,0 +1,186 @@
+/// <reference lib="dom" />
+/**
+ * Pages-service — Cloudflare Pages publish domain logic over the PAL's
+ * `cfApi` passthrough. Works identically on every platform that provides it:
+ * the dev server / desktop (user API token via cf-settings → /__studio/cf/proxy)
+ * and the cloud platform (hosted OAuth). Publish state is written to
+ * project.json `build.deploy` — it travels with the repo, so any Studio can
+ * tell whether the publish workflow already exists.
+ *
+ * @license MIT
+ */
+
+import { updateWranglerConfig } from "@jxsuite/create/scaffold";
+import type { DeployConfig, ProjectConfig } from "@jxsuite/schema/types";
+import { getPlatform } from "../platform";
+import { updateSiteConfig } from "../site-context";
+
+export interface CfAccount {
+  id: string;
+  name: string;
+}
+
+export interface PagesDeploymentInfo {
+  id: string;
+  url: string;
+  environment: string;
+  /** Latest stage name/status, e.g. "deploy: success" or "build: failure". */
+  stage: string;
+  status: string;
+  createdOn: string;
+}
+
+export interface ConnectOptions {
+  accountId: string;
+  projectName: string;
+  productionBranch: string;
+  owner: string;
+  repo: string;
+}
+
+/** True when the active platform can reach the Cloudflare API. */
+export function platformSupportsPublish(): boolean {
+  return typeof getPlatform().cfApi === "function";
+}
+
+async function cfApi<T>(path: string, init?: { method?: string; body?: unknown }): Promise<T> {
+  const api = getPlatform().cfApi;
+  if (!api) {
+    throw new Error("This platform cannot reach the Cloudflare API");
+  }
+  return (await api(path, init)) as T;
+}
+
+export async function listAccounts(): Promise<CfAccount[]> {
+  return cfApi<CfAccount[]>("/accounts");
+}
+
+interface PagesProjectWire {
+  name: string;
+  subdomain?: string;
+  domains?: string[];
+}
+
+/** The Pages project, or null when it does not exist yet. */
+export async function getPagesProject(
+  accountId: string,
+  projectName: string,
+): Promise<PagesProjectWire | null> {
+  try {
+    return await cfApi<PagesProjectWire>(`/accounts/${accountId}/pages/projects/${projectName}`);
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Create a GitHub-connected Pages project that builds `bunx jx build` on every push. Requires the
+ * Cloudflare Pages GitHub App on the repo — the characteristic failure is surfaced to the caller
+ * with an install hint.
+ */
+export async function createPagesProject(opts: ConnectOptions): Promise<PagesProjectWire> {
+  return cfApi<PagesProjectWire>(`/accounts/${opts.accountId}/pages/projects`, {
+    method: "POST",
+    body: {
+      name: opts.projectName,
+      production_branch: opts.productionBranch,
+      build_config: {
+        build_command: "bunx jx build",
+        destination_dir: "dist",
+      },
+      source: {
+        type: "github",
+        config: {
+          owner: opts.owner,
+          repo_name: opts.repo,
+          production_branch: opts.productionBranch,
+          deployments_enabled: true,
+        },
+      },
+    },
+  });
+}
+
+interface DeploymentWire {
+  id: string;
+  url: string;
+  environment: string;
+  latest_stage?: { name?: string; status?: string };
+  created_on: string;
+}
+
+/** The most recent deployment of the connected project, or null when none. */
+export async function latestDeployment(deploy: DeployConfig): Promise<PagesDeploymentInfo | null> {
+  const deployments = await cfApi<DeploymentWire[]>(
+    `/accounts/${deploy.accountId}/pages/projects/${deploy.projectName}/deployments`,
+  );
+  const [latest] = deployments;
+  if (!latest) {
+    return null;
+  }
+  return {
+    id: latest.id,
+    url: latest.url,
+    environment: latest.environment,
+    stage: latest.latest_stage?.name ?? "unknown",
+    status: latest.latest_stage?.status ?? "unknown",
+    createdOn: latest.created_on,
+  };
+}
+
+/**
+ * Write (or with null, remove) the `build.deploy` block, preserving the rest of `build`. On
+ * connect, wrangler.jsonc is patched so its `name` matches the connected Pages project
+ * (comment-bearing JSONC is left alone).
+ */
+export async function writeDeployConfig(
+  config: ProjectConfig,
+  deploy: DeployConfig | null,
+): Promise<void> {
+  const build: NonNullable<ProjectConfig["build"]> = { ...config.build };
+  if (deploy === null) {
+    delete build.deploy;
+  } else {
+    build.deploy = deploy;
+  }
+  await updateSiteConfig({ build });
+
+  if (deploy !== null) {
+    const platform = getPlatform();
+    let existing: string | null = null;
+    try {
+      existing = await platform.readFile("wrangler.jsonc");
+    } catch {
+      existing = null;
+    }
+    const adapter =
+      build.adapter === "cloudflare-workers" ? "cloudflare-workers" : "cloudflare-pages";
+    const { content, patched } = updateWranglerConfig(existing, {
+      adapter,
+      slug: deploy.projectName,
+    });
+    if (patched) {
+      await platform.writeFile("wrangler.jsonc", content);
+    }
+  }
+}
+
+/**
+ * The whole connect flow: reuse the Pages project when it already exists, create it otherwise, then
+ * persist `build.deploy` (+ wrangler.jsonc sync).
+ */
+export async function connectDeploy(
+  config: ProjectConfig,
+  opts: ConnectOptions,
+): Promise<DeployConfig> {
+  const existing = await getPagesProject(opts.accountId, opts.projectName);
+  const project = existing ?? (await createPagesProject(opts));
+  const deploy: DeployConfig = {
+    provider: "cloudflare-pages",
+    accountId: opts.accountId,
+    projectName: opts.projectName,
+    ...(project.subdomain ? { productionUrl: `https://${project.subdomain}` } : {}),
+  };
+  await writeDeployConfig(config, deploy);
+  return deploy;
+}

package/src/publish/publish-panel.ts

@@ -0,0 +1,360 @@
+/// <reference lib="dom" />
+/**
+ * Publish panel — the one-click Cloudflare Pages publish flow, driven by the
+ * PAL's cf* members. States: unsupported platform → info; no credential →
+ * connect (hosted OAuth via cfConnect, or an API-token form backed by
+ * cf-settings); connected without `build.deploy` → create-and-connect form;
+ * connected → deployment status (publishing rides every commit).
+ *
+ * @license MIT
+ */
+
+import { html } from "lit-html";
+import type { DeployConfig, ProjectConfig } from "@jxsuite/schema/types";
+import { getPlatform } from "../platform";
+import { getCfToken, setCfToken } from "../services/cf-settings";
+import { projectState } from "../store";
+import type { CfConnection } from "../types";
+import { openModal } from "../ui/layers";
+import type { CfAccount, PagesDeploymentInfo } from "./pages-service";
+import {
+  connectDeploy,
+  latestDeployment,
+  listAccounts,
+  platformSupportsPublish,
+  writeDeployConfig,
+} from "./pages-service";
+
+const PAGES_APP_INSTALL_URL = "https://github.com/apps/cloudflare-pages/installations/new";
+
+let _handle: ReturnType<typeof openModal> | null = null;
+let _connection: CfConnection | null | "loading" = "loading";
+let _accounts: CfAccount[] = [];
+let _deployment: PagesDeploymentInfo | null = null;
+let _error = "";
+let _busy = false;
+let _form = { accountId: "", branch: "main", owner: "", projectName: "", repo: "" };
+
+function currentConfig(): ProjectConfig | null {
+  return (projectState?.projectConfig as ProjectConfig | undefined) ?? null;
+}
+
+function currentDeploy(): DeployConfig | undefined {
+  return currentConfig()?.build?.deploy;
+}
+
+function deriveSlug(name: string): string {
+  return (
+    name
+      .toLowerCase()
+      .replaceAll(/[^a-z0-9]+/g, "-")
+      .replaceAll(/^-+|-+$/g, "")
+      .slice(0, 58) || "site"
+  );
+}
+
+/** Prefill owner/repo from cloud roots ("owner/repo"); blank elsewhere. */
+function prefillRepo(): { owner: string; repo: string } {
+  const root = getPlatform().projectRoot;
+  const match = /^([\w.-]+)\/([\w.-]+)$/.exec(root);
+  return match ? { owner: match[1]!, repo: match[2]! } : { owner: "", repo: "" };
+}
+
+async function loadConnection(): Promise<void> {
+  _connection = "loading";
+  render();
+  try {
+    _connection = (await getPlatform().cfConnection?.()) ?? null;
+    if (_connection?.connected) {
+      _accounts = await listAccounts();
+      _form.accountId = _connection.accountId ?? _accounts[0]?.id ?? "";
+      const deploy = currentDeploy();
+      if (deploy) {
+        _deployment = await latestDeployment(deploy);
+      }
+    }
+  } catch (error) {
+    _connection = null;
+    _error = error instanceof Error ? error.message : String(error);
+  }
+  render();
+}
+
+async function saveToken(host: HTMLElement): Promise<void> {
+  const input = host.querySelector<HTMLInputElement>("#cf-token-input");
+  setCfToken(input?.value ?? "");
+  _error = "";
+  await loadConnection();
+}
+
+async function hostedConnect(): Promise<void> {
+  _busy = true;
+  render();
+  try {
+    await getPlatform().cfConnect?.();
+  } catch (error) {
+    _error = error instanceof Error ? error.message : String(error);
+  }
+  _busy = false;
+  await loadConnection();
+}
+
+async function submitConnect(): Promise<void> {
+  const config = currentConfig();
+  if (!config) {
+    return;
+  }
+  if (!_form.projectName || !_form.owner || !_form.repo || !_form.accountId) {
+    _error = "Account, project name, and the GitHub owner/repo are all required.";
+    render();
+    return;
+  }
+  _busy = true;
+  _error = "";
+  render();
+  try {
+    const deploy = await connectDeploy(config, {
+      accountId: _form.accountId,
+      owner: _form.owner,
+      productionBranch: _form.branch || "main",
+      projectName: _form.projectName,
+      repo: _form.repo,
+    });
+    _deployment = await latestDeployment(deploy).catch(() => null);
+  } catch (error) {
+    _error = error instanceof Error ? error.message : String(error);
+  }
+  _busy = false;
+  render();
+}
+
+async function disconnect(): Promise<void> {
+  const config = currentConfig();
+  if (!config) {
+    return;
+  }
+  _busy = true;
+  render();
+  try {
+    await writeDeployConfig(config, null);
+    _deployment = null;
+  } catch (error) {
+    _error = error instanceof Error ? error.message : String(error);
+  }
+  _busy = false;
+  render();
+}
+
+function close(): void {
+  _handle?.close();
+  _handle = null;
+}
+
+function fieldRow(label: string, input: unknown) {
+  return html`
+    <label class="publish-field">
+      <span>${label}</span>
+      ${input}
+    </label>
+  `;
+}
+
+function credentialTpl() {
+  const platform = getPlatform();
+  if (platform.cfConnect) {
+    return html`
+      <p>Connect your Cloudflare account to publish this site.</p>
+      <sp-button ?disabled=${_busy} @click=${() => void hostedConnect()}>
+        Connect Cloudflare
+      </sp-button>
+    `;
+  }
+  return html`
+    <p>
+      Paste a Cloudflare API token (permissions: Account Settings Read, Pages Read/Write). It is
+      stored locally and only sent to the same-origin proxy.
+    </p>
+    ${fieldRow(
+      "API token",
+      html`<sp-textfield
+        id="cf-token-input"
+        type="password"
+        value=${getCfToken()}
+        placeholder="cf_..."
+      ></sp-textfield>`,
+    )}
+    <sp-button ?disabled=${_busy} @click=${(e: Event) => void saveToken(hostOf(e))}>
+      Verify & Connect
+    </sp-button>
+  `;
+}
+
+function hostOf(e: Event): HTMLElement {
+  return (e.target as HTMLElement).closest(".publish-modal") ?? document.body;
+}
+
+function connectFormTpl() {
+  return html`
+    <p>
+      Create a Cloudflare Pages project connected to this repository. Every commit then builds and
+      publishes automatically (<code>bunx jx build</code>).
+    </p>
+    ${fieldRow(
+      "Account",
+      html`
+        <sp-picker
+          value=${_form.accountId}
+          @change=${(e: Event) => {
+            _form.accountId = (e.target as HTMLInputElement).value;
+          }}
+        >
+          ${_accounts.map((a) => html`<sp-menu-item value=${a.id}>${a.name}</sp-menu-item>`)}
+        </sp-picker>
+      `,
+    )}
+    ${fieldRow(
+      "Pages project name",
+      html`<sp-textfield
+        value=${_form.projectName}
+        @input=${(e: Event) => {
+          _form.projectName = (e.target as HTMLInputElement).value;
+        }}
+      ></sp-textfield>`,
+    )}
+    ${fieldRow(
+      "GitHub owner",
+      html`<sp-textfield
+        value=${_form.owner}
+        @input=${(e: Event) => {
+          _form.owner = (e.target as HTMLInputElement).value;
+        }}
+      ></sp-textfield>`,
+    )}
+    ${fieldRow(
+      "GitHub repository",
+      html`<sp-textfield
+        value=${_form.repo}
+        @input=${(e: Event) => {
+          _form.repo = (e.target as HTMLInputElement).value;
+        }}
+      ></sp-textfield>`,
+    )}
+    ${fieldRow(
+      "Production branch",
+      html`<sp-textfield
+        value=${_form.branch}
+        @input=${(e: Event) => {
+          _form.branch = (e.target as HTMLInputElement).value;
+        }}
+      ></sp-textfield>`,
+    )}
+    <sp-button ?disabled=${_busy} @click=${() => void submitConnect()}>
+      ${_busy ? "Connecting…" : "Create & Connect"}
+    </sp-button>
+  `;
+}
+
+function statusTpl(deploy: DeployConfig) {
+  return html`
+    <p>
+      Connected to Pages project <strong>${deploy.projectName}</strong>
+      ${deploy.productionUrl
+        ? html` —
+            <a href=${deploy.productionUrl} target="_blank" rel="noreferrer">
+              ${deploy.productionUrl}
+            </a>`
+        : ""}
+    </p>
+    ${_deployment
+      ? html`
+          <p>
+            Latest deployment: <strong>${_deployment.stage}: ${_deployment.status}</strong>
+            (${_deployment.environment}) —
+            <a href=${_deployment.url} target="_blank" rel="noreferrer">preview</a>
+          </p>
+        `
+      : html`<p>No deployments yet — the first commit after connecting triggers one.</p>`}
+    <p class="publish-hint">Publishing happens automatically on every commit.</p>
+    <div class="publish-actions">
+      <sp-button variant="secondary" ?disabled=${_busy} @click=${() => void loadConnection()}>
+        Refresh
+      </sp-button>
+      <sp-button variant="negative" ?disabled=${_busy} @click=${() => void disconnect()}>
+        Disconnect
+      </sp-button>
+    </div>
+  `;
+}
+
+function bodyTpl() {
+  if (!platformSupportsPublish()) {
+    return html`
+      <p>
+        This platform cannot reach the Cloudflare API. Publish by committing and pushing — your host
+        builds <code>bunx jx build</code> and serves <code>dist/</code>.
+      </p>
+    `;
+  }
+  if (_connection === "loading") {
+    return html`<p>Checking Cloudflare connection…</p>`;
+  }
+  if (!_connection?.connected) {
+    return credentialTpl();
+  }
+  const deploy = currentDeploy();
+  return deploy ? statusTpl(deploy) : connectFormTpl();
+}
+
+function errorTpl() {
+  if (!_error) {
+    return "";
+  }
+  const needsPagesApp = /github/i.test(_error) && /app|install|source|repo/i.test(_error);
+  return html`
+    <p class="publish-error">
+      ${_error}
+      ${needsPagesApp
+        ? html` — if the Cloudflare Pages GitHub App is not installed on the repository,
+            <a href=${PAGES_APP_INSTALL_URL} target="_blank" rel="noreferrer">install it</a> and
+            retry.`
+        : ""}
+    </p>
+  `;
+}
+
+function render(): void {
+  const tpl = html`
+    <div class="new-project-modal publish-modal">
+      <div class="new-project-modal-header">
+        <h2 class="new-project-modal-title">Publish</h2>
+        <sp-action-button size="s" quiet @click=${close}>✕</sp-action-button>
+      </div>
+      <div class="new-project-modal-body">${bodyTpl()} ${errorTpl()}</div>
+    </div>
+  `;
+  if (_handle) {
+    _handle.update(tpl);
+  } else {
+    _handle = openModal(tpl);
+  }
+}
+
+/** Open the publish modal for the active project. */
+export function openPublishPanel(): void {
+  const config = currentConfig();
+  const { owner, repo } = prefillRepo();
+  _connection = "loading";
+  _accounts = [];
+  _deployment = null;
+  _error = "";
+  _busy = false;
+  _form = {
+    accountId: "",
+    branch: "main",
+    owner,
+    projectName: currentDeploy()?.projectName ?? deriveSlug(config?.name ?? ""),
+    repo,
+  };
+  render();
+  void loadConnection();
+}