diff --git a/apps/yerd-gui/src/components/site-create/CreateComposerSiteWizard.spec.ts b/apps/yerd-gui/src/components/site-create/CreateComposerSiteWizard.spec.ts
new file mode 100644
index 00000000..909124c6
--- /dev/null
+++ b/apps/yerd-gui/src/components/site-create/CreateComposerSiteWizard.spec.ts
@@ -0,0 +1,307 @@
+import { flushPromises, mount } from "@vue/test-utils";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import CreateComposerSiteWizard from "./CreateComposerSiteWizard.vue";
+import type { ComposerFramework, ToolStatus } from "@/ipc/types";
+
+const createSite = vi.hoisted(() => vi.fn());
+const jobStatus = vi.hoisted(() => vi.fn());
+const listTools = vi.hoisted(() => vi.fn());
+const toastSuccess = vi.hoisted(() => vi.fn());
+const toastError = vi.hoisted(() => vi.fn());
+
+vi.mock("@/ipc/client", () => ({
+  IpcError: class IpcError extends Error {},
+  availablePhp: vi.fn(),
+  createSite,
+  installPhpWithProgress: vi.fn(),
+  installToolStreamed: vi.fn(),
+  jobCancel: vi.fn().mockResolvedValue(undefined),
+  jobStatus,
+  listTools,
+  openInBrowser: vi.fn(),
+  openPath: vi.fn(),
+  pickDirectory: vi.fn(),
+  pollJobToEnd: vi.fn(),
+}));
+
+vi.mock("@/composables/useDaemon", () => ({
+  useDaemon: () => ({ refresh: vi.fn() }),
+}));
+
+vi.mock("@/composables/useToast", () => ({
+  useToast: () => ({ success: toastSuccess, error: toastError }),
+}));
+
+function composer(overrides: Partial<ToolStatus> = {}): ToolStatus {
+  return {
+    id: "composer",
+    display_name: "Composer",
+    installed: true,
+    version: "2.8.0",
+    binaries: ["composer"],
+    ...overrides,
+  };
+}
+
+async function mountWizard(framework: ComposerFramework, phpVersions: string[]) {
+  const w = mount(CreateComposerSiteWizard, {
+    props: {
+      open: true,
+      framework,
+      parkedFolders: ["/srv"],
+      phpVersions,
+      defaultPhp: "",
+      tld: "test",
+      report: null,
+    },
+    global: { stubs: { teleport: true } },
+  });
+  await flushPromises();
+  return w;
+}
+
+function byText(w: Awaited<ReturnType<typeof mountWizard>>, text: string) {
+  return w.findAll("button").find((b) => b.text().includes(text));
+}
+
+describe("CreateComposerSiteWizard", () => {
+  beforeEach(() => {
+    createSite.mockReset();
+    jobStatus.mockReset();
+    listTools.mockReset();
+    listTools.mockResolvedValue([composer()]);
+    toastSuccess.mockReset();
+    toastError.mockReset();
+  });
+
+  it.each([
+    ["codeigniter", "CodeIgniter"],
+    ["cakephp", "CakePHP"],
+    ["slim", "Slim"],
+  ] as const)("titles the %s wizard after the framework", async (framework, label) => {
+    const w = await mountWizard(framework, ["8.4"]);
+    expect(w.text()).toContain(`Create a new ${label} site`);
+  });
+
+  it("submits a spec tagged with the chosen framework on the newest supported PHP", async () => {
+    createSite.mockResolvedValue("job-1");
+    jobStatus.mockResolvedValue({
+      log: [],
+      next_cursor: 0,
+      phase: "Done",
+      state: "succeeded",
+      error: null,
+    });
+    const w = await mountWizard("cakephp", ["8.3", "8.4"]);
+
+    await w.find("#ccs-name").setValue("shop");
+    await byText(w, "Next")!.trigger("click");
+    await byText(w, "Create site")!.trigger("click");
+    await flushPromises();
+
+    expect(createSite).toHaveBeenCalledWith({
+      name: "shop",
+      parent_dir: "/srv",
+      php: "8.4",
+      secure: false,
+      framework: { framework: "cakephp" },
+    });
+    expect(w.emitted("created")).toBeTruthy();
+  });
+
+  it("shows the lowercased folder the daemon will create", async () => {
+    const w = await mountWizard("slim", ["8.4"]);
+
+    await w.find("#ccs-name").setValue("Shop");
+    await byText(w, "Next")!.trigger("click");
+
+    expect(w.text()).toContain("/srv/shop");
+    expect(w.text()).not.toContain("/srv/Shop");
+  });
+
+  it("re-enables Cancel when a cancelled create is retried", async () => {
+    createSite.mockResolvedValue("job-1");
+    const status = (state: string) => ({
+      log: [],
+      next_cursor: 0,
+      phase: "Scaffolding",
+      state,
+      error: null,
+    });
+    jobStatus
+      .mockResolvedValueOnce(status("running"))
+      .mockResolvedValueOnce(status("cancelled"))
+      .mockResolvedValue(status("running"));
+    const w = await mountWizard("slim", ["8.4"]);
+
+    await w.find("#ccs-name").setValue("shop");
+    await byText(w, "Next")!.trigger("click");
+    await byText(w, "Create site")!.trigger("click");
+    await flushPromises();
+    await byText(w, "Cancel")!.trigger("click");
+    expect(byText(w, "Cancelling")).toBeTruthy();
+
+    await vi.waitFor(() => expect(byText(w, "Back")).toBeTruthy(), { timeout: 2000 });
+    await byText(w, "Back")!.trigger("click");
+    await byText(w, "Create site")!.trigger("click");
+    await flushPromises();
+
+    const cancel = byText(w, "Cancel")!;
+    expect(cancel.text()).toBe("Cancel");
+    expect(cancel.attributes("disabled")).toBeUndefined();
+    w.unmount();
+  });
+
+  it("keeps polling after the dialog closes and resumes progress on reopen", async () => {
+    createSite.mockResolvedValue("job-1");
+    const status = (state: string) => ({
+      log: [],
+      next_cursor: 0,
+      phase: "Scaffolding",
+      state,
+      error: null,
+    });
+    jobStatus
+      .mockResolvedValueOnce(status("running"))
+      .mockResolvedValueOnce(status("running"))
+      .mockResolvedValue(status("succeeded"));
+    const w = await mountWizard("slim", ["8.4"]);
+
+    await w.find("#ccs-name").setValue("shop");
+    await byText(w, "Next")!.trigger("click");
+    await byText(w, "Create site")!.trigger("click");
+    await flushPromises();
+
+    await w.setProps({ open: false });
+    await w.setProps({ open: true });
+    expect(w.find("#ccs-name").exists()).toBe(false);
+    expect(w.text()).toContain("Scaffolding");
+
+    await w.setProps({ open: false });
+    await vi.waitFor(() => expect(w.emitted("created")).toBeTruthy(), { timeout: 3000 });
+    w.unmount();
+  });
+
+  it("stops polling when unmounted while a status request is in flight", async () => {
+    createSite.mockResolvedValue("job-1");
+    let resolveStatus: (value: unknown) => void = () => {};
+    jobStatus.mockReturnValueOnce(
+      new Promise((resolve) => {
+        resolveStatus = resolve;
+      }),
+    );
+    const w = await mountWizard("slim", ["8.4"]);
+
+    await w.find("#ccs-name").setValue("shop");
+    await byText(w, "Next")!.trigger("click");
+    await byText(w, "Create site")!.trigger("click");
+    await flushPromises();
+    expect(jobStatus).toHaveBeenCalledTimes(1);
+
+    w.unmount();
+    resolveStatus({ log: [], next_cursor: 0, phase: "Scaffolding", state: "running", error: null });
+    await flushPromises();
+    await new Promise((resolve) => setTimeout(resolve, 700));
+
+    expect(jobStatus).toHaveBeenCalledTimes(1);
+  });
+
+  it("resumes the progress view when reopened before the daemon returns a job id", async () => {
+    let resolveCreate: (value: string) => void = () => {};
+    createSite.mockReturnValueOnce(
+      new Promise<string>((resolve) => {
+        resolveCreate = resolve;
+      }),
+    );
+    jobStatus.mockResolvedValue({
+      log: [],
+      next_cursor: 0,
+      phase: "Scaffolding",
+      state: "succeeded",
+      error: null,
+    });
+    const w = await mountWizard("slim", ["8.4"]);
+
+    await w.find("#ccs-name").setValue("shop");
+    await byText(w, "Next")!.trigger("click");
+    await byText(w, "Create site")!.trigger("click");
+    await w.setProps({ open: false });
+    await w.setProps({ open: true });
+    await flushPromises();
+
+    expect(w.find("#ccs-name").exists()).toBe(false);
+    resolveCreate("job-1");
+    await flushPromises();
+    expect(w.emitted("created")).toBeTruthy();
+    w.unmount();
+  });
+
+  it("stops the phase spinner when the job fails", async () => {
+    createSite.mockResolvedValue("job-1");
+    jobStatus.mockResolvedValue({
+      log: [],
+      next_cursor: 0,
+      phase: "Scaffolding",
+      state: "failed",
+      error: "composer exploded",
+    });
+    const w = await mountWizard("slim", ["8.4"]);
+
+    await w.find("#ccs-name").setValue("shop");
+    await byText(w, "Next")!.trigger("click");
+    await byText(w, "Create site")!.trigger("click");
+    await flushPromises();
+
+    expect(w.text()).toContain("composer exploded");
+    expect(w.find(".animate-spin").exists()).toBe(false);
+    w.unmount();
+  });
+
+  it.each([
+    ["succeeded", null],
+    ["failed", "composer exploded"],
+  ] as const)("toasts a %s create that finishes while the dialog is closed", async (state, error) => {
+    createSite.mockResolvedValue("job-1");
+    jobStatus
+      .mockResolvedValueOnce({ log: [], next_cursor: 0, phase: "Scaffolding", state: "running", error: null })
+      .mockResolvedValue({ log: [], next_cursor: 0, phase: "Done", state, error });
+    const w = await mountWizard("slim", ["8.4"]);
+
+    await w.find("#ccs-name").setValue("shop");
+    await byText(w, "Next")!.trigger("click");
+    await byText(w, "Create site")!.trigger("click");
+    await flushPromises();
+    await w.setProps({ open: false });
+
+    const toast = state === "succeeded" ? toastSuccess : toastError;
+    await vi.waitFor(() => expect(toast).toHaveBeenCalledTimes(1), { timeout: 2000 });
+    expect(Boolean(w.emitted("created"))).toBe(state === "succeeded");
+    w.unmount();
+  });
+
+  it("gates on PHP when every installed version is below the framework minimum", async () => {
+    const w = await mountWizard("codeigniter", ["7.4"]);
+    expect(w.text()).toContain("A few tools are needed first");
+    expect(w.text()).toContain("Installed, but not 8.1+");
+  });
+
+  it("accepts older PHP for Slim", async () => {
+    const w = await mountWizard("slim", ["7.4"]);
+    expect(w.text()).not.toContain("A few tools are needed first");
+    expect(w.find("#ccs-name").exists()).toBe(true);
+  });
+
+  it("treats an external Composer as satisfying the prerequisite", async () => {
+    listTools.mockResolvedValue([composer({ installed: false, external: true })]);
+    const w = await mountWizard("slim", ["8.4"]);
+    expect(w.text()).not.toContain("A few tools are needed first");
+  });
+
+  it("gates on Composer when it is neither managed nor external", async () => {
+    listTools.mockResolvedValue([]);
+    const w = await mountWizard("slim", ["8.4"]);
+    expect(w.text()).toContain("A few tools are needed first");
+    expect(byText(w, "Install missing tools")).toBeTruthy();
+  });
+});
diff --git a/apps/yerd-gui/src/components/site-create/CreateComposerSiteWizard.vue b/apps/yerd-gui/src/components/site-create/CreateComposerSiteWizard.vue
new file mode 100644
index 00000000..7da0f862
--- /dev/null
+++ b/apps/yerd-gui/src/components/site-create/CreateComposerSiteWizard.vue
@@ -0,0 +1,177 @@
+<script setup lang="ts">
+import { computed, reactive, watch } from "vue";
+
+import CreateSiteWizardShell from "@/components/site-create/CreateSiteWizardShell.vue";
+import SiteBasicsStep from "@/components/site-create/SiteBasicsStep.vue";
+import { useSiteBasics } from "@/composables/useSiteBasics";
+import { type PrereqRow, useToolPrereqs } from "@/composables/useToolPrereqs";
+import { comparePhpVersions } from "@/lib/phpVersion";
+import type { ComposerFramework, CreateSiteSpec, StatusReport } from "@/ipc/types";
+
+const props = defineProps<{
+  open: boolean;
+  framework: ComposerFramework;
+  parkedFolders: string[];
+  phpVersions: string[];
+  defaultPhp: string;
+  tld: string;
+  report: StatusReport | null;
+}>();
+const emit = defineEmits<{
+  (e: "update:open", v: boolean): void;
+  (e: "created"): void;
+}>();
+
+const FRAMEWORKS: Record<ComposerFramework, { label: string; pkg: string; minPhp: string }> = {
+  codeigniter: { label: "CodeIgniter", pkg: "codeigniter4/appstarter", minPhp: "8.1" },
+  cakephp: { label: "CakePHP", pkg: "cakephp/app", minPhp: "8.1" },
+  slim: { label: "Slim", pkg: "slim/skeleton", minPhp: "7.4" },
+};
+const meta = computed(() => FRAMEWORKS[props.framework]);
+
+const PHASES = ["Preflight", "Scaffolding", "Registering", "Done"];
+
+const form = reactive({ name: "", location: "", php: "", secure: false });
+const { nameValid, projectPath, domain, openUrl, basicsValid } = useSiteBasics(form, props);
+
+function supportsPhp(v: string): boolean {
+  return comparePhpVersions(v, meta.value.minPhp) >= 0;
+}
+const supportedPhpVersions = computed(() => props.phpVersions.filter(supportsPhp));
+const phpOptions = computed(() =>
+  supportedPhpVersions.value.map((v) => ({ value: v, label: `PHP ${v}` })),
+);
+
+function preferredPhp(): string {
+  const supported = supportedPhpVersions.value;
+  if (props.defaultPhp && supported.includes(props.defaultPhp)) return props.defaultPhp;
+  return supported[supported.length - 1] ?? "";
+}
+
+const prereqs = reactive(useToolPrereqs(() => props.open));
+const noSupportedPhp = computed(() => supportedPhpVersions.value.length === 0);
+const needsComposer = computed(() => !prereqs.available("composer"));
+const ready = computed(() => !noSupportedPhp.value && !needsComposer.value);
+
+function installPhp(): Promise<boolean> {
+  return prereqs.installPhp(
+    supportsPhp,
+    `No installable PHP ${meta.value.minPhp} or newer was found.`,
+  );
+}
+
+const prereqRows = computed<PrereqRow[]>(() => [
+  {
+    id: "php",
+    label: "PHP",
+    sub:
+      noSupportedPhp.value && props.phpVersions.length > 0
+        ? `Installed, but not ${meta.value.minPhp}+`
+        : `Runtime ${meta.value.minPhp}+`,
+    ok: !noSupportedPhp.value,
+    install: installPhp,
+  },
+  {
+    id: "composer",
+    label: "Composer",
+    sub: "Dependency manager",
+    ok: !needsComposer.value,
+    install: () => prereqs.installTool("composer"),
+  },
+]);
+
+function installAll(): Promise<void> {
+  return prereqs.installAll(async () => {
+    if (noSupportedPhp.value && !(await installPhp())) return false;
+    if (needsComposer.value && !(await prereqs.installTool("composer"))) return false;
+    return true;
+  });
+}
+
+function buildSpec(): CreateSiteSpec {
+  return {
+    name: form.name.trim(),
+    parent_dir: form.location,
+    php: form.php,
+    secure: form.secure,
+    framework: { framework: props.framework },
+  };
+}
+
+function reset(): void {
+  form.name = "";
+  form.location = props.parkedFolders[0] ?? "";
+  form.php = preferredPhp();
+  form.secure = false;
+  prereqs.reset();
+  void prereqs.refresh();
+}
+
+watch(
+  () => props.phpVersions,
+  () => {
+    if (!form.php || !supportedPhpVersions.value.includes(form.php)) {
+      form.php = preferredPhp();
+    }
+  },
+);
+</script>
+
+<template>
+  <CreateSiteWizardShell
+    :open="open"
+    :title="`Create a new ${meta.label} site`"
+    :steps="['Basics', 'Review']"
+    :step-valid="[basicsValid, true]"
+    :build-spec="buildSpec"
+    :phases="PHASES"
+    :domain="domain"
+    :project-path="projectPath"
+    :open-url="openUrl"
+    :prereqs="prereqs"
+    :prereq-rows="prereqRows"
+    :prereq-summary="`Creating a ${meta.label} site needs PHP and Composer.`"
+    :ready="ready"
+    :install-all="installAll"
+    @update:open="(v) => emit('update:open', v)"
+    @created="emit('created')"
+    @reset="reset"
+  >
+    <template #step-0>
+      <SiteBasicsStep
+        v-model:name="form.name"
+        v-model:location="form.location"
+        v-model:php="form.php"
+        v-model:secure="form.secure"
+        id-prefix="ccs"
+        :parked-folders="parkedFolders"
+        :php-options="phpOptions"
+        :domain="domain"
+        :project-path="projectPath"
+        :name-valid="nameValid"
+        no-php-text="No supported PHP installed."
+      >
+        <template #php-hint>
+          The version this site runs on. {{ meta.label }} needs PHP {{ meta.minPhp }} or newer.
+        </template>
+      </SiteBasicsStep>
+    </template>
+
+    <template #step-1>
+      <div class="space-y-4">
+        <div class="rounded-lg border p-3 text-sm">
+          <dl class="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1.5">
+            <dt class="text-muted-foreground">Site</dt>
+            <dd class="font-mono">{{ domain }}</dd>
+            <dt class="text-muted-foreground">Path</dt>
+            <dd class="truncate font-mono">{{ projectPath }}</dd>
+            <dt class="text-muted-foreground">PHP</dt>
+            <dd>{{ form.php }}{{ form.secure ? " · HTTPS" : "" }}</dd>
+            <dt class="text-muted-foreground">Template</dt>
+            <dd class="font-mono">{{ meta.pkg }}</dd>
+          </dl>
+        </div>
+      </div>
+    </template>
+  </CreateSiteWizardShell>
+</template>
diff --git a/apps/yerd-gui/src/components/site-create/CreateLaravelWizard.spec.ts b/apps/yerd-gui/src/components/site-create/CreateLaravelWizard.spec.ts
new file mode 100644
index 00000000..cd6b4cea
--- /dev/null
+++ b/apps/yerd-gui/src/components/site-create/CreateLaravelWizard.spec.ts
@@ -0,0 +1,334 @@
+import { flushPromises, mount } from "@vue/test-utils";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import CreateLaravelWizard from "./CreateLaravelWizard.vue";
+import type { ToolStatus } from "@/ipc/types";
+
+const createSite = vi.hoisted(() => vi.fn());
+const jobStatus = vi.hoisted(() => vi.fn());
+const listTools = vi.hoisted(() => vi.fn());
+const availablePhp = vi.hoisted(() => vi.fn());
+const installPhpWithProgress = vi.hoisted(() => vi.fn());
+const installToolStreamed = vi.hoisted(() => vi.fn());
+const pollJobToEnd = vi.hoisted(() => vi.fn());
+const toastSuccess = vi.hoisted(() => vi.fn());
+const toastError = vi.hoisted(() => vi.fn());
+
+vi.mock("@/ipc/client", () => ({
+  IpcError: class IpcError extends Error {},
+  availablePhp,
+  createSite,
+  installPhpWithProgress,
+  installToolStreamed,
+  jobCancel: vi.fn().mockResolvedValue(undefined),
+  jobStatus,
+  listTools,
+  openInBrowser: vi.fn(),
+  openPath: vi.fn(),
+  pickDirectory: vi.fn(),
+  pollJobToEnd,
+}));
+
+vi.mock("@/composables/useDaemon", () => ({
+  useDaemon: () => ({ refresh: vi.fn() }),
+}));
+
+vi.mock("@/composables/useToast", () => ({
+  useToast: () => ({ success: toastSuccess, error: toastError }),
+}));
+
+function tool(id: string, overrides: Partial<ToolStatus> = {}): ToolStatus {
+  return { id, display_name: id, installed: true, version: "1.0", binaries: [id], ...overrides };
+}
+
+const ALL_TOOLS = [tool("composer"), tool("laravel"), tool("node")];
+
+function status(state: string, error: string | null = null) {
+  return { log: [], next_cursor: 0, phase: "Scaffolding", state, error };
+}
+
+async function openWizard(phpVersions = ["8.3", "8.4"], defaultPhp = "8.4") {
+  const w = mount(CreateLaravelWizard, {
+    props: {
+      open: false,
+      parkedFolders: ["/srv"],
+      phpVersions,
+      defaultPhp,
+      tld: "test",
+      report: null,
+    },
+    global: { stubs: { teleport: true } },
+  });
+  await w.setProps({ open: true });
+  await flushPromises();
+  return w;
+}
+
+function byText(w: Awaited<ReturnType<typeof openWizard>>, text: string) {
+  return w.findAll("button").find((b) => b.text().includes(text));
+}
+
+async function next(w: Awaited<ReturnType<typeof openWizard>>) {
+  await byText(w, "Next")!.trigger("click");
+}
+
+async function toReview(w: Awaited<ReturnType<typeof openWizard>>, name = "blog") {
+  await w.find("#cs-name").setValue(name);
+  await next(w);
+  await next(w);
+  await next(w);
+}
+
+function submittedOptions() {
+  return createSite.mock.calls[0][0].framework.options;
+}
+
+describe("CreateLaravelWizard", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    listTools.mockResolvedValue(ALL_TOOLS);
+    createSite.mockResolvedValue("job-1");
+    jobStatus.mockResolvedValue(status("succeeded"));
+  });
+
+  it("is titled for Laravel", async () => {
+    const w = await openWizard();
+    expect(w.text()).toContain("Create a new Laravel site");
+  });
+
+  it("submits the default spec on the default PHP", async () => {
+    const w = await openWizard();
+    await toReview(w);
+    await byText(w, "Create site")!.trigger("click");
+    await flushPromises();
+
+    expect(createSite).toHaveBeenCalledWith({
+      name: "blog",
+      parent_dir: "/srv",
+      php: "8.4",
+      secure: false,
+      framework: {
+        framework: "laravel",
+        options: {
+          starter_kit: "none",
+          auth: "laravel",
+          livewire_class_components: false,
+          teams: false,
+          testing: "pest",
+          database: "sqlite",
+          js: "skip",
+          git: true,
+          boost: false,
+        },
+      },
+    });
+    expect(w.emitted("created")).toBeTruthy();
+  });
+
+  it("honours a supported default PHP that isn't the newest", async () => {
+    const w = await openWizard(["8.3", "8.4"], "8.3");
+    expect((w.find("#cs-php").element as HTMLSelectElement).value).toBe("8.3");
+  });
+
+  it("defaults to the newest supported PHP when the default is outside 8.3-8.5", async () => {
+    const w = await openWizard(["8.2", "8.3", "8.4"], "8.2");
+    expect((w.find("#cs-php").element as HTMLSelectElement).value).toBe("8.4");
+    expect(w.find("#cs-php").text()).not.toContain("8.2");
+  });
+
+  it("replaces a selection that stops being installed", async () => {
+    const w = await openWizard(["8.3", "8.4"], "8.3");
+    await w.setProps({ phpVersions: ["8.4"] });
+    expect((w.find("#cs-php").element as HTMLSelectElement).value).toBe("8.4");
+  });
+
+  it("gates Next on a valid name", async () => {
+    const w = await openWizard();
+    await w.find("#cs-name").setValue("-bad");
+    expect(byText(w, "Next")!.attributes("disabled")).toBeDefined();
+    expect(w.text()).toContain("Use a single label");
+    await w.find("#cs-name").setValue("good");
+    expect(byText(w, "Next")!.attributes("disabled")).toBeUndefined();
+  });
+
+  it("sends the chosen JS runtime for an Inertia kit and skip for Livewire", async () => {
+    const w = await openWizard();
+    await w.find("#cs-name").setValue("blog");
+    await next(w);
+    await byText(w, "Vue")!.trigger("click");
+    await w.find("#cs-js").setValue("bun");
+    await next(w);
+    await next(w);
+    await byText(w, "Create site")!.trigger("click");
+    await flushPromises();
+    expect(submittedOptions()).toMatchObject({ starter_kit: "vue", js: "bun" });
+
+    createSite.mockClear();
+    await w.setProps({ open: false });
+    await w.setProps({ open: true });
+    await flushPromises();
+    await w.find("#cs-name").setValue("blog");
+    await next(w);
+    await byText(w, "Livewire")!.trigger("click");
+    await next(w);
+    await next(w);
+    await byText(w, "Create site")!.trigger("click");
+    await flushPromises();
+    expect(submittedOptions()).toMatchObject({ starter_kit: "livewire", js: "skip" });
+  });
+
+  it("requires a community package before leaving the Stack step", async () => {
+    const w = await openWizard();
+    await w.find("#cs-name").setValue("blog");
+    await next(w);
+    await byText(w, "Community")!.trigger("click");
+    expect(byText(w, "Next")!.attributes("disabled")).toBeDefined();
+    await w.find("#cs-pkg").setValue("acme/kit");
+    await next(w);
+    await next(w);
+    await byText(w, "Create site")!.trigger("click");
+    await flushPromises();
+    expect(submittedOptions().starter_kit).toEqual({ community: "acme/kit" });
+  });
+
+  it("notes that a missing Node is installed during creation", async () => {
+    listTools.mockResolvedValue([tool("composer"), tool("laravel")]);
+    const w = await openWizard();
+    await w.find("#cs-name").setValue("blog");
+    await next(w);
+    await byText(w, "React")!.trigger("click");
+    expect(w.text()).toContain("Node will be installed automatically.");
+    await next(w);
+    await next(w);
+    expect(w.text()).toContain("Node will be installed automatically during creation.");
+  });
+
+  it("blocks the installer row until Yerd's own Composer is present", async () => {
+    listTools.mockResolvedValue([tool("composer", { installed: false, external: true })]);
+    const w = await openWizard();
+
+    expect(w.text()).toContain("A few tools are needed first");
+    const installs = w.findAll("button").filter((b) => b.text() === "Install");
+    const install = installs[installs.length - 1];
+    expect(install.attributes("disabled")).toBeDefined();
+    expect(install.attributes("title")).toContain("Composer is required");
+
+    await byText(w, "Install missing tools")!.trigger("click");
+    await flushPromises();
+    expect(toastError).toHaveBeenCalledWith(
+      "Can't install the Laravel installer",
+      expect.any(String),
+    );
+    expect(installToolStreamed).not.toHaveBeenCalled();
+  });
+
+  it("installs missing tools in dependency order", async () => {
+    listTools
+      .mockResolvedValueOnce([])
+      .mockResolvedValue([tool("composer")]);
+    availablePhp.mockResolvedValue({ available: ["8.2", "8.4", "8.6"] });
+    installToolStreamed.mockImplementation(async (id: string) => `install-${id}`);
+    pollJobToEnd.mockResolvedValue({ state: "succeeded", error: null });
+    const w = await openWizard([], "");
+
+    await byText(w, "Install missing tools")!.trigger("click");
+    await flushPromises();
+
+    expect(installPhpWithProgress).toHaveBeenCalledWith("8.4", expect.any(Function));
+    expect(installToolStreamed.mock.calls.map((c) => c[0])).toEqual(["composer", "laravel"]);
+    expect(toastSuccess).toHaveBeenCalledWith("Toolchain ready");
+  });
+
+  it("returns to Review with the form kept after a failed create", async () => {
+    jobStatus.mockResolvedValue(status("failed", "composer exploded"));
+    const w = await openWizard();
+    await toReview(w);
+    await byText(w, "Create site")!.trigger("click");
+    await flushPromises();
+
+    expect(w.text()).toContain("composer exploded");
+    await byText(w, "Back")!.trigger("click");
+    expect(w.text()).toContain("blog.test");
+    expect(byText(w, "Create site")).toBeTruthy();
+  });
+
+  it("shows the lowercased folder the daemon will create", async () => {
+    const w = await openWizard();
+    await w.find("#cs-name").setValue("Blog");
+    expect(w.text()).toContain("/srv/blog");
+    expect(w.text()).not.toContain("/srv/Blog");
+  });
+
+  it("keeps polling while closed, announces the result and resumes on reopen", async () => {
+    jobStatus
+      .mockResolvedValueOnce(status("running"))
+      .mockResolvedValueOnce(status("running"))
+      .mockResolvedValue(status("succeeded"));
+    const w = await openWizard();
+    await toReview(w);
+    await byText(w, "Create site")!.trigger("click");
+    await flushPromises();
+
+    await w.setProps({ open: false });
+    await w.setProps({ open: true });
+    expect(w.find("#cs-name").exists()).toBe(false);
+    expect(w.text()).toContain("Scaffolding");
+
+    await w.setProps({ open: false });
+    await vi.waitFor(() => expect(w.emitted("created")).toBeTruthy(), { timeout: 3000 });
+    expect(toastSuccess).toHaveBeenCalledWith("blog.test is ready");
+    w.unmount();
+  });
+
+  it("announces a status failure that happens while closed", async () => {
+    jobStatus
+      .mockResolvedValueOnce(status("running"))
+      .mockRejectedValue(new Error("daemon restarted"));
+    const w = await openWizard();
+    await toReview(w);
+    await byText(w, "Create site")!.trigger("click");
+    await flushPromises();
+
+    await w.setProps({ open: false });
+    await vi.waitFor(
+      () => expect(toastError).toHaveBeenCalledWith("Couldn't create blog.test", "daemon restarted"),
+      { timeout: 2000 },
+    );
+    w.unmount();
+  });
+
+  it("re-enables Cancel when a cancelled create is retried", async () => {
+    jobStatus
+      .mockResolvedValueOnce(status("running"))
+      .mockResolvedValueOnce(status("cancelled"))
+      .mockResolvedValue(status("running"));
+    const w = await openWizard();
+    await toReview(w);
+    await byText(w, "Create site")!.trigger("click");
+    await flushPromises();
+    await byText(w, "Cancel")!.trigger("click");
+
+    await vi.waitFor(() => expect(byText(w, "Back")).toBeTruthy(), { timeout: 2000 });
+    await byText(w, "Back")!.trigger("click");
+    await byText(w, "Create site")!.trigger("click");
+    await flushPromises();
+
+    const cancel = byText(w, "Cancel")!;
+    expect(cancel.text()).toBe("Cancel");
+    expect(cancel.attributes("disabled")).toBeUndefined();
+    w.unmount();
+  });
+
+  it("resets the form when reopened after a finished create", async () => {
+    const w = await openWizard();
+    await toReview(w);
+    await byText(w, "Create site")!.trigger("click");
+    await flushPromises();
+    expect(w.text()).toContain("blog.test is ready");
+
+    await w.setProps({ open: false });
+    await w.setProps({ open: true });
+    await flushPromises();
+    expect((w.find("#cs-name").element as HTMLInputElement).value).toBe("");
+  });
+});
diff --git a/apps/yerd-gui/src/components/site-create/CreateLaravelWizard.vue b/apps/yerd-gui/src/components/site-create/CreateLaravelWizard.vue
index 98819676..ebdf07fb 100644
--- a/apps/yerd-gui/src/components/site-create/CreateLaravelWizard.vue
+++ b/apps/yerd-gui/src/components/site-create/CreateLaravelWizard.vue
@@ -1,52 +1,25 @@
 <script setup lang="ts">
-import { computed, nextTick, onUnmounted, reactive, ref, watch } from "vue";
-import {
-  Check,
-  CheckCircle2,
-  ChevronLeft,
-  Circle,
-  ExternalLink,
-  FolderOpen,
-  Loader2,
-  TriangleAlert,
-} from "lucide-vue-next";
+import { computed, reactive, ref, watch } from "vue";
 
-import Button from "@/components/ui/Button.vue";
+import CreateSiteWizardShell from "@/components/site-create/CreateSiteWizardShell.vue";
+import SiteBasicsStep from "@/components/site-create/SiteBasicsStep.vue";
 import Input from "@/components/ui/Input.vue";
-import Modal from "@/components/ui/Modal.vue";
 import Select from "@/components/ui/Select.vue";
 import Switch from "@/components/ui/Switch.vue";
-import Spinner from "@/components/ui/Spinner.vue";
-import { phpVersionInRange } from "@/lib/phpVersion";
-import { siteUrl } from "@/lib/siteUrl";
-import { useDaemon } from "@/composables/useDaemon";
+import { useSiteBasics } from "@/composables/useSiteBasics";
+import { type PrereqRow, useToolPrereqs } from "@/composables/useToolPrereqs";
 import { useToast } from "@/composables/useToast";
-import {
-  availablePhp,
-  createSite,
-  installPhpWithProgress,
-  installToolStreamed,
-  IpcError,
-  jobCancel,
-  jobStatus,
-  listTools,
-  openInBrowser,
-  openPath,
-  pickDirectory,
-  pollJobToEnd,
-} from "@/ipc/client";
+import { phpVersionInRange } from "@/lib/phpVersion";
 import type {
   AuthProvider,
   CreateSiteSpec,
   Database,
-  JobState,
   JsRuntime,
   LaravelOptions,
   StarterKit,
   StarterKitTag,
   StatusReport,
   Testing,
-  ToolStatus,
 } from "@/ipc/types";
 
 const props = defineProps<{
@@ -65,31 +38,25 @@ const emit = defineEmits<{
 }>();
 
 const toast = useToast();
-const { refresh } = useDaemon();
-
-// ── wizard state ─────────────────────────────────────────────────────────────
-type Step = 0 | 1 | 2 | 3 | 4; // Basics, Stack, Testing, Review, Progress
-const step = ref<Step>(0);
 
-const STEP_LABELS = ["Basics", "Stack", "Testing", "Review"];
+const PHASES = ["Preflight", "Scaffolding", "Registering", "Done"];
 
 const form = reactive({
   name: "",
   location: "",
   php: "",
   secure: false,
-  // stack
   communityPackage: "",
   auth: "laravel" as AuthProvider,
   livewireClassComponents: false,
   teams: false,
   js: "npm" as JsRuntime,
-  // testing & data
   testing: "pest" as Testing,
   database: "sqlite" as Database,
   git: true,
   boost: false,
 });
+const { nameValid, projectPath, domain, openUrl, basicsValid } = useSiteBasics(form, props);
 
 const KIT_OPTIONS: { value: StarterKitTag | "community"; label: string; hint: string }[] = [
   { value: "none", label: "None", hint: "Plain skeleton" },
@@ -101,205 +68,106 @@ const KIT_OPTIONS: { value: StarterKitTag | "community"; label: string; hint: st
 ];
 
 const kitChoice = ref<StarterKitTag | "community">("none");
-const isJsKit = computed(() =>
-  ["react", "vue", "svelte"].includes(kitChoice.value) ||
-  (kitChoice.value === "community"),
+const isJsKit = computed(
+  () => ["react", "vue", "svelte"].includes(kitChoice.value) || kitChoice.value === "community",
 );
 const isLivewire = computed(() => kitChoice.value === "livewire");
 const hasAuthKit = computed(() => kitChoice.value !== "none");
+const stackValid = computed(
+  () => kitChoice.value !== "community" || form.communityPackage.trim() !== "",
+);
 
-// The Laravel installer only supports this window; anything outside it is hidden
-// from the picker rather than offered and then failing mid-create.
+/** The Laravel installer only supports this window; anything outside it is hidden
+ *  from the picker rather than offered and then failing mid-create. */
 const LARAVEL_MIN_PHP = "8.3";
 const LARAVEL_MAX_PHP = "8.5";
-const supportedPhpVersions = computed(() =>
-  props.phpVersions.filter((v) => phpVersionInRange(v, LARAVEL_MIN_PHP, LARAVEL_MAX_PHP)),
-);
+function supportsPhp(v: string): boolean {
+  return phpVersionInRange(v, LARAVEL_MIN_PHP, LARAVEL_MAX_PHP);
+}
+const supportedPhpVersions = computed(() => props.phpVersions.filter(supportsPhp));
 const phpOptions = computed(() =>
   supportedPhpVersions.value.map((v) => ({ value: v, label: `PHP ${v}` })),
 );
 
-// The default only applies when it falls in the supported window; otherwise the
-// newest supported version wins so the Basics step always opens on a valid pick.
+/** The default only applies when it falls in the supported window; otherwise the
+ *  newest supported version wins so the Basics step always opens on a valid pick. */
 function preferredPhp(): string {
   const supported = supportedPhpVersions.value;
   if (props.defaultPhp && supported.includes(props.defaultPhp)) return props.defaultPhp;
   return supported[supported.length - 1] ?? "";
 }
-const locationOptions = computed(() => {
-  const opts = props.parkedFolders.map((f) => ({ value: f, label: `${f}  (parked)` }));
-  // Include a custom-picked location that isn't a parked root.
-  if (form.location && !props.parkedFolders.includes(form.location)) {
-    opts.unshift({ value: form.location, label: form.location });
-  }
-  return opts;
-});
-
-const nameValid = computed(() => /^[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?$/i.test(form.name.trim()));
-const projectPath = computed(() =>
-  form.location ? `${form.location}/${form.name.trim()}` : "",
-);
-const domain = computed(() => `${form.name.trim().toLowerCase() || "name"}.${props.tld}`);
-// Browser URL for the finished site's "Open" action. Reuse the shared helper so
-// it matches the rest of the GUI exactly: resolver-on uses the `.test` domain
-// with the correct scheme + bound port (honouring port-redirect), resolver-off
-// uses the http://localhost/~ fallback.
-const openUrl = computed(() =>
-  siteUrl({ name: form.name.trim().toLowerCase() || "name", secure: form.secure }, props.report),
-);
-
-const basicsValid = computed(
-  () => nameValid.value && form.location.trim() !== "" && form.php !== "",
-);
-const stackValid = computed(
-  () => kitChoice.value !== "community" || form.communityPackage.trim() !== "",
-);
-
-// ── prerequisites ────────────────────────────────────────────────────────────
-const tools = ref<ToolStatus[]>([]);
-const toolsLoading = ref(false);
-const installingTool = ref<string | null>(null);
-const installingAll = ref(false);
-const installLog = ref<string[]>([]);
-const installLogBox = ref<HTMLElement | null>(null);
-
-async function appendInstallLog(lines: string[]): Promise<void> {
-  installLog.value.push(...lines);
-  await nextTick();
-  const el = installLogBox.value;
-  if (el) el.scrollTop = el.scrollHeight;
-}
 
-// A tool satisfies a prerequisite if it's Yerd-managed OR externally available
-// on the user's PATH - the scaffold can use either.
-function toolAvailable(id: string): boolean {
-  return tools.value.some((t) => t.id === id && (t.installed || t.external));
-}
-// Managed-only: building the *managed* Laravel installer requires Yerd's own
-// Composer (an external Composer can't build it). Gates the laravel install step.
-const managedComposer = computed(() =>
-  tools.value.some((t) => t.id === "composer" && t.installed),
-);
-// PHP, Composer and the Laravel installer are *required* and gated up front.
-const needsComposer = computed(() => !toolAvailable("composer"));
-const needsInstaller = computed(() => !toolAvailable("laravel"));
+const prereqs = reactive(useToolPrereqs(() => props.open));
+/** Building the managed Laravel installer needs Yerd's own Composer; an external one can't. */
+const managedComposer = computed(() => prereqs.managed("composer"));
+const needsComposer = computed(() => !prereqs.available("composer"));
+const needsInstaller = computed(() => !prereqs.available("laravel"));
 const noSupportedPhp = computed(() => supportedPhpVersions.value.length === 0);
-// Distinguishes "no PHP at all" from "PHP installed, none of it supported" so
-// the prerequisites row can say which, rather than implying PHP is missing.
-const phpUnsupported = computed(() => noSupportedPhp.value && props.phpVersions.length > 0);
-// Node/Bun are only conditionally needed and the daemon installs them inline
-// during the job (shown as a phase), so they don't block the wizard.
-const needsNode = computed(() => form.js === "npm" && !toolAvailable("node"));
-const needsBun = computed(() => form.js === "bun" && !toolAvailable("bun"));
-
-/** Whether the required toolchain is present (the wizard is unlocked). */
+/** Node and Bun are installed by the daemon during the job when needed, so they never block the wizard. */
+const needsNode = computed(() => form.js === "npm" && !prereqs.available("node"));
+const needsBun = computed(() => form.js === "bun" && !prereqs.available("bun"));
 const ready = computed(
   () => !noSupportedPhp.value && !needsComposer.value && !needsInstaller.value,
 );
-/** Any prerequisite install in flight (per-item or install-all). */
-const installBusy = computed(() => installingAll.value || installingTool.value !== null);
 
-async function refreshTools(): Promise<void> {
-  toolsLoading.value = true;
-  try {
-    tools.value = await listTools();
-  } catch {
-    tools.value = [];
-  } finally {
-    toolsLoading.value = false;
-  }
-}
-
-async function installPrereq(id: "composer" | "laravel" | "node" | "bun"): Promise<boolean> {
-  installingTool.value = id;
-  installLog.value = [];
-  try {
-    const jobId = await installToolStreamed(id);
-    const final = await pollJobToEnd(
-      jobId,
-      (lines) => void appendInstallLog(lines),
-      () => props.open,
-    );
-    await refreshTools();
-    // "running" means the poll stopped because the wizard closed, not a failure.
-    if (final.state === "running") return false;
-    if (final.state !== "succeeded") {
-      toast.error(`Couldn't install ${id}`, final.error ?? "install failed");
-      return false;
-    }
-    return true;
-  } catch (e) {
-    toast.error(`Couldn't install ${id}`, (e as IpcError).message);
-    return false;
-  } finally {
-    installingTool.value = null;
-  }
+function installPhp(): Promise<boolean> {
+  return prereqs.installPhp(
+    supportsPhp,
+    `No installable PHP between ${LARAVEL_MIN_PHP} and ${LARAVEL_MAX_PHP} was found.`,
+  );
 }
 
-/**
- * Install the newest available minor within the supported window (the
- * distribution returns them ascending), rather than pinning a version that rots
- * each release. The daemon resolves the patch and makes it the global default;
- * the live status poll then surfaces it, which unlocks the wizard automatically.
- */
-async function installFirstPhp(): Promise<boolean> {
-  installingTool.value = "php";
-  installLog.value = [];
-  try {
-    const { available } = await availablePhp();
-    const supported = available.filter((v) =>
-      phpVersionInRange(v, LARAVEL_MIN_PHP, LARAVEL_MAX_PHP),
-    );
-    const version = supported[supported.length - 1];
-    if (!version) {
-      toast.error(
-        "Couldn't install PHP",
-        `No installable PHP between ${LARAVEL_MIN_PHP} and ${LARAVEL_MAX_PHP} was found.`,
-      );
-      return false;
-    }
-    void appendInstallLog([`Installing PHP ${version}…`]);
-    await installPhpWithProgress(version, (lines) => void appendInstallLog(lines));
-    await refresh();
-    void appendInstallLog([`Installed PHP ${version}`]);
-    return true;
-  } catch (e) {
-    toast.error("Couldn't install PHP", (e as IpcError).message);
-    return false;
-  } finally {
-    installingTool.value = null;
-  }
-}
+const prereqRows = computed<PrereqRow[]>(() => [
+  {
+    id: "php",
+    label: "PHP",
+    sub:
+      noSupportedPhp.value && props.phpVersions.length > 0
+        ? `Installed, but not ${LARAVEL_MIN_PHP}-${LARAVEL_MAX_PHP}`
+        : `Runtime ${LARAVEL_MIN_PHP}-${LARAVEL_MAX_PHP}`,
+    ok: !noSupportedPhp.value,
+    install: installPhp,
+  },
+  {
+    id: "composer",
+    label: "Composer",
+    sub: "Dependency manager",
+    ok: !needsComposer.value,
+    install: () => prereqs.installTool("composer"),
+  },
+  {
+    id: "laravel",
+    label: "Laravel installer",
+    sub: "laravel new",
+    ok: !needsInstaller.value,
+    install: () => prereqs.installTool("laravel"),
+    blockedReason: managedComposer.value
+      ? undefined
+      : "Yerd's own Composer is required to build the Laravel installer",
+  },
+]);
 
-/** Install every missing required tool, in dependency order, then unlock. */
-async function installAllMissing(): Promise<void> {
-  installingAll.value = true;
-  try {
-    if (noSupportedPhp.value && !(await installFirstPhp())) return;
-    if (needsComposer.value && !(await installPrereq("composer"))) return;
-    // The managed Laravel installer is BUILT via Yerd's own Composer, so it can
-    // only be auto-installed when managed Composer is present. If Composer is only
-    // external, skip (the daemon would reject it) and guide the user.
+/** PHP, then Composer, then the installer, which only Yerd's own Composer can build. */
+function installAll(): Promise<void> {
+  return prereqs.installAll(async () => {
+    if (noSupportedPhp.value && !(await installPhp())) return false;
+    if (needsComposer.value && !(await prereqs.installTool("composer"))) return false;
     if (needsInstaller.value) {
       if (!managedComposer.value) {
         toast.error(
           "Can't install the Laravel installer",
           "Yerd needs its own Composer to build it - install Yerd's Composer, or run `composer global require laravel/installer`.",
         );
-        return;
+        return false;
       }
-      if (!(await installPrereq("laravel"))) return;
+      if (!(await prereqs.installTool("laravel"))) return false;
     }
-    // Reaching here means every missing tool installed successfully. Don't gate
-    // the toast on `ready` - it derives from the async `phpVersions` prop, which
-    // may not have propagated yet.
-    await nextTick();
-    toast.success("Toolchain ready");
-  } finally {
-    installingAll.value = false;
-  }
+    return true;
+  });
 }
 
+/** The JS runtime picker only shows for Inertia kits, so None and Livewire never
+ *  trigger an npm or Node install the user didn't ask for. */
 function buildSpec(): CreateSiteSpec {
   const kit: StarterKit =
     kitChoice.value === "community"
@@ -312,8 +180,6 @@ function buildSpec(): CreateSiteSpec {
     teams: hasAuthKit.value && form.teams,
     testing: form.testing,
     database: form.database,
-    // The JS runtime selector only appears for Inertia kits; for None/Livewire
-    // never trigger an npm/Node install the user didn't ask for.
     js: isJsKit.value ? form.js : "skip",
     git: form.git,
     boost: form.boost,
@@ -327,102 +193,7 @@ function buildSpec(): CreateSiteSpec {
   };
 }
 
-// ── progress / job polling ───────────────────────────────────────────────────
-const jobId = ref<string | null>(null);
-const jobStateRef = ref<JobState>("running");
-const phase = ref("Starting");
-const log = ref<string[]>([]);
-const jobError = ref<string | null>(null);
-const logBox = ref<HTMLElement | null>(null);
-let cursor = 0;
-let pollTimer: number | null = null;
-
-const PHASES = ["Preflight", "Scaffolding", "Registering", "Done"];
-function phaseStatus(p: string): "done" | "active" | "todo" {
-  const cur = phase.value;
-  const ci = PHASES.indexOf(cur);
-  const pi = PHASES.indexOf(p);
-  if (jobStateRef.value === "succeeded") return "done";
-  if (ci === -1) return p === "Preflight" ? "active" : "todo"; // e.g. "Installing Node"
-  if (pi < ci) return "done";
-  if (pi === ci) return "active";
-  return "todo";
-}
-
-async function chooseLocation(): Promise<void> {
-  const dir = await pickDirectory(form.location || undefined);
-  if (dir) form.location = dir;
-}
-
-async function startCreate(): Promise<void> {
-  step.value = 4;
-  jobStateRef.value = "running";
-  phase.value = "Starting";
-  log.value = [];
-  jobError.value = null;
-  cursor = 0;
-  try {
-    jobId.value = await createSite(buildSpec());
-    poll();
-  } catch (e) {
-    jobStateRef.value = "failed";
-    jobError.value = (e as IpcError).message;
-  }
-}
-
-function poll(): void {
-  if (!jobId.value) return;
-  void (async () => {
-    try {
-      const r = await jobStatus(jobId.value as string, cursor);
-      if (r.log.length) {
-        log.value.push(...r.log);
-        void scrollLog();
-      }
-      cursor = r.next_cursor; // advance unconditionally (phase-only ticks too)
-      phase.value = r.phase;
-      jobStateRef.value = r.state;
-      jobError.value = r.error;
-      // Stop if the modal was closed mid-poll (don't re-arm into the background).
-      if (r.state === "running" && props.open) {
-        pollTimer = window.setTimeout(poll, 600);
-      } else if (r.state === "succeeded") {
-        emit("created");
-      }
-    } catch (e) {
-      jobStateRef.value = "failed";
-      jobError.value = (e as IpcError).message;
-    }
-  })();
-}
-
-async function scrollLog(): Promise<void> {
-  await nextTick();
-  const el = logBox.value;
-  if (el) el.scrollTop = el.scrollHeight;
-}
-
-const cancelRequested = ref(false);
-async function cancelJob(): Promise<void> {
-  if (!jobId.value || cancelRequested.value) return;
-  cancelRequested.value = true;
-  try {
-    await jobCancel(jobId.value);
-  } catch {
-    /* the job may already be finishing; ignore */
-  }
-}
-
-function stopPolling(): void {
-  if (pollTimer !== null) {
-    window.clearTimeout(pollTimer);
-    pollTimer = null;
-  }
-}
-
-// ── lifecycle ────────────────────────────────────────────────────────────────
-function resetForm(): void {
-  step.value = 0;
+function reset(): void {
   form.name = "";
   form.location = props.parkedFolders[0] ?? "";
   form.php = preferredPhp();
@@ -437,35 +208,12 @@ function resetForm(): void {
   form.database = "sqlite";
   form.git = true;
   form.boost = false;
-  // progress / install state
-  jobId.value = null;
-  jobError.value = null;
-  log.value = [];
-  installLog.value = [];
-  jobStateRef.value = "running";
-  phase.value = "Starting";
-  cursor = 0;
-  installingTool.value = null;
-  installingAll.value = false;
-  cancelRequested.value = false;
+  prereqs.reset();
+  void prereqs.refresh();
 }
 
-watch(
-  () => props.open,
-  (open) => {
-    if (open) {
-      resetForm();
-      void refreshTools();
-    } else {
-      stopPolling();
-    }
-  },
-);
-
-// Keep the selection honest as the installed set changes underneath the wizard
-// (PHP installed from the prerequisites screen, or the selected version
-// uninstalled elsewhere): anything no longer supported falls back to the
-// preferred version rather than being submitted for a version that isn't there.
+/** Keep the selection honest as the installed set changes underneath the wizard:
+ *  a version no longer supported falls back to the preferred one. */
 watch(
   () => props.phpVersions,
   () => {
@@ -474,491 +222,228 @@ watch(
     }
   },
 );
-
-// Stop the create-job poll if the component is ever torn down mid-flight. The
-// streamed install polls (pollJobToEnd) self-stop via their `() => props.open`
-// predicate.
-onUnmounted(stopPolling);
-
-const busy = computed(() => jobStateRef.value === "running" && step.value === 4);
 </script>
 
 <template>
-  <Modal
+  <CreateSiteWizardShell
     :open="open"
     title="Create a new Laravel site"
-    size="lg"
+    :steps="['Basics', 'Stack', 'Testing', 'Review']"
+    :step-valid="[basicsValid, stackValid, true, true]"
+    :build-spec="buildSpec"
+    :phases="PHASES"
+    :domain="domain"
+    :project-path="projectPath"
+    :open-url="openUrl"
+    :prereqs="prereqs"
+    :prereq-rows="prereqRows"
+    prereq-summary="Creating a Laravel site needs PHP, Composer and the Laravel installer."
+    :ready="ready"
+    :install-all="installAll"
     @update:open="(v) => emit('update:open', v)"
+    @created="emit('created')"
+    @reset="reset"
   >
-    <!-- checking the toolchain -->
-    <div v-if="toolsLoading" class="flex items-center justify-center py-12">
-      <Spinner class="size-6" />
-    </div>
+    <template #step-0>
+      <SiteBasicsStep
+        v-model:name="form.name"
+        v-model:location="form.location"
+        v-model:php="form.php"
+        v-model:secure="form.secure"
+        id-prefix="cs"
+        :parked-folders="parkedFolders"
+        :php-options="phpOptions"
+        :domain="domain"
+        :project-path="projectPath"
+        :name-valid="nameValid"
+        no-php-text="No supported PHP installed."
+      >
+        <template #php-hint>
+          The version this site runs on. Laravel needs PHP {{ LARAVEL_MIN_PHP }} to
+          {{ LARAVEL_MAX_PHP }}.
+        </template>
+      </SiteBasicsStep>
+    </template>
 
-    <!-- ── Prerequisites gate (first page when tooling is missing) ── -->
-    <div v-else-if="!ready" class="space-y-4">
-      <div class="flex items-start gap-2 rounded-lg border border-warning/40 bg-warning/10 p-3">
-        <TriangleAlert class="mt-0.5 size-4 shrink-0 text-warning" />
+    <template #step-1>
+      <div class="space-y-4">
         <div>
-          <p class="text-sm font-medium">A few tools are needed first</p>
-          <p class="text-xs text-muted-foreground">
-            Creating a Laravel site needs PHP, Composer and the Laravel installer.
-            Install the missing ones to continue.
-          </p>
-        </div>
-      </div>
-
-      <div class="divide-y rounded-lg border">
-        <div
-          v-for="row in [
-            { id: 'php', label: 'PHP', sub: phpUnsupported ? `Installed, but not ${LARAVEL_MIN_PHP}-${LARAVEL_MAX_PHP}` : `Runtime ${LARAVEL_MIN_PHP}-${LARAVEL_MAX_PHP}`, ok: !noSupportedPhp, busyKey: 'php' },
-            { id: 'composer', label: 'Composer', sub: 'Dependency manager', ok: !needsComposer, busyKey: 'composer' },
-            { id: 'laravel', label: 'Laravel installer', sub: 'laravel new', ok: !needsInstaller, busyKey: 'laravel' },
-          ]"
-          :key="row.id"
-          class="flex items-center justify-between gap-3 px-3 py-2.5"
-        >
-          <div class="min-w-0">
-            <p class="text-sm font-medium">{{ row.label }}</p>
-            <p class="text-xs text-muted-foreground">{{ row.sub }}</p>
-          </div>
-          <div class="flex shrink-0 items-center gap-2">
-            <span v-if="row.ok" class="flex items-center gap-1 text-xs text-success">
-              <CheckCircle2 class="size-4" /> Installed
-            </span>
-            <template v-else>
-              <Spinner v-if="installingTool === row.busyKey" class="size-4" />
-              <Button
-                v-else
-                size="sm"
-                variant="outline"
-                :disabled="installBusy || (row.id === 'laravel' && !managedComposer)"
-                :title="row.id === 'laravel' && !managedComposer ? 'Yerd\'s own Composer is required to build the Laravel installer' : ''"
-                @click="row.id === 'php' ? installFirstPhp() : installPrereq(row.id as 'composer' | 'laravel')"
-              >
-                Install
-              </Button>
-            </template>
+          <span class="text-sm font-medium">Starter kit</span>
+          <div class="mt-2 grid grid-cols-3 gap-2">
+            <button
+              v-for="k in KIT_OPTIONS"
+              :key="k.value"
+              type="button"
+              class="rounded-lg border p-2.5 text-left transition-colors"
+              :class="
+                kitChoice === k.value
+                  ? 'border-brand bg-brand/5 ring-1 ring-brand'
+                  : 'hover:border-brand/40'
+              "
+              @click="kitChoice = k.value"
+            >
+              <span class="block text-sm font-medium">{{ k.label }}</span>
+              <span class="block text-[11px] text-muted-foreground">{{ k.hint }}</span>
+            </button>
           </div>
         </div>
-      </div>
 
-      <!-- live install output -->
-      <pre
-        v-if="installLog.length"
-        ref="installLogBox"
-        class="h-40 overflow-y-auto whitespace-pre-wrap rounded-lg bg-zinc-950 p-3 font-mono text-[11px] leading-relaxed text-zinc-200"
-      >{{ installLog.join("\n") }}</pre>
-    </div>
-
-    <!-- ── Wizard (unlocked once the toolchain is present) ── -->
-    <template v-else>
-    <!-- step indicator: chevron progress (4 evenly-spaced segments) -->
-    <div v-if="step < 4" class="mb-6 flex w-full">
-      <div
-        v-for="(label, i) in STEP_LABELS"
-        :key="label"
-        class="step-chevron -ml-2.5 flex h-9 flex-1 items-center justify-center gap-1.5 pl-5 pr-1 text-xs font-medium transition-colors first:ml-0 first:pl-3"
-        :class="[
-          i < step
-            ? 'bg-brand/70 text-white'
-            : i === step
-              ? 'bg-brand text-white'
-              : 'bg-muted text-muted-foreground',
-          i !== step && i !== 0 ? 'step-chevron-sep' : '',
-        ]"
-      >
-        <Check v-if="i < step" class="size-3.5 shrink-0" />
-        <span>{{ label }}</span>
-      </div>
-    </div>
-
-    <!-- ── Step 1: Basics ── -->
-    <div v-if="step === 0" class="space-y-4">
-      <div>
-        <label class="text-sm font-medium" for="cs-name">Project name</label>
-        <Input id="cs-name" v-model="form.name" placeholder="e.g. blog" class="mt-2" />
-        <p class="mt-1 text-xs text-muted-foreground">
-          Served at
-          <span class="font-mono text-foreground">{{ domain }}</span>
-          <span v-if="projectPath"> · creates <span class="font-mono">{{ projectPath }}</span></span>
-        </p>
-        <p v-if="form.name && !nameValid" class="mt-1 text-xs text-destructive">
-          Use a single label: letters, numbers and hyphens only.
-        </p>
-      </div>
-
-      <div>
-        <label class="text-sm font-medium" for="cs-location">Location</label>
-        <div class="mt-2 flex gap-2">
-          <Select
-            v-if="locationOptions.length"
-            id="cs-location"
-            :model-value="form.location"
-            :options="locationOptions"
-            class="w-full"
-            aria-label="Location"
-            @update:model-value="(v: string) => (form.location = v)"
+        <div v-if="kitChoice === 'community'">
+          <label class="text-sm font-medium" for="cs-pkg">Community package</label>
+          <Input
+            id="cs-pkg"
+            v-model="form.communityPackage"
+            placeholder="vendor/starter-kit"
+            class="mt-2"
           />
-          <Input v-else :model-value="form.location" readonly placeholder="Choose a folder…" />
-          <Button variant="outline" @click="chooseLocation">
-            <FolderOpen class="size-4" /> Browse
-          </Button>
-        </div>
-        <p class="mt-1 text-xs text-muted-foreground">
-          A parked folder serves the new site automatically; any other folder is linked.
-        </p>
-      </div>
-
-      <div class="flex items-center justify-between gap-4 rounded-lg border p-3">
-        <div>
-          <p class="text-sm font-medium">PHP version</p>
-          <p class="text-xs text-muted-foreground">
-            The version this site runs on. Laravel needs PHP {{ LARAVEL_MIN_PHP }} to
-            {{ LARAVEL_MAX_PHP }}.
-          </p>
         </div>
-        <Select
-          v-if="phpOptions.length"
-          id="cs-php"
-          :model-value="form.php"
-          :options="phpOptions"
-          class="w-40 shrink-0"
-          aria-label="PHP version"
-          @update:model-value="(v: string) => (form.php = v)"
-        />
-        <span v-else class="shrink-0 text-xs text-destructive">
-          No supported PHP installed.
-        </span>
-      </div>
 
-      <div class="flex items-center justify-between gap-4 rounded-lg border p-3">
-        <div>
-          <p class="text-sm font-medium">HTTPS</p>
-          <p class="text-xs text-muted-foreground">Serve this site over TLS.</p>
+        <div v-if="isJsKit" class="flex gap-4">
+          <div class="flex-1">
+            <label class="text-sm font-medium" for="cs-js">Frontend dependencies</label>
+            <Select
+              id="cs-js"
+              :model-value="form.js"
+              :options="[
+                { value: 'npm', label: 'Install & build with npm' },
+                { value: 'bun', label: 'Install & build with Bun' },
+                { value: 'skip', label: 'Skip (install later)' },
+              ]"
+              class="mt-2 w-full"
+              aria-label="Frontend dependencies"
+              @update:model-value="(v: string) => (form.js = v as JsRuntime)"
+            />
+            <p v-if="needsNode || needsBun" class="mt-1 text-xs text-muted-foreground">
+              {{ needsNode ? "Node" : "Bun" }} will be installed automatically.
+            </p>
+          </div>
+          <div class="flex-1">
+            <label class="text-sm font-medium" for="cs-auth">Authentication</label>
+            <Select
+              id="cs-auth"
+              :model-value="form.auth"
+              :options="[
+                { value: 'laravel', label: 'Built-in (Laravel)' },
+                { value: 'work_os', label: 'WorkOS AuthKit' },
+              ]"
+              class="mt-2 w-full"
+              aria-label="Authentication provider"
+              @update:model-value="(v: string) => (form.auth = v as AuthProvider)"
+            />
+          </div>
         </div>
-        <Switch v-model="form.secure" aria-label="Serve over HTTPS" />
-      </div>
-    </div>
 
-    <!-- ── Step 2: Stack ── -->
-    <div v-else-if="step === 1" class="space-y-4">
-      <div>
-        <span class="text-sm font-medium">Starter kit</span>
-        <div class="mt-2 grid grid-cols-3 gap-2">
-          <button
-            v-for="k in KIT_OPTIONS"
-            :key="k.value"
-            type="button"
-            class="rounded-lg border p-2.5 text-left transition-colors"
-            :class="
-              kitChoice === k.value
-                ? 'border-brand bg-brand/5 ring-1 ring-brand'
-                : 'hover:border-brand/40'
-            "
-            @click="kitChoice = k.value"
-          >
-            <span class="block text-sm font-medium">{{ k.label }}</span>
-            <span class="block text-[11px] text-muted-foreground">{{ k.hint }}</span>
-          </button>
-        </div>
-      </div>
-
-      <div v-if="kitChoice === 'community'">
-        <label class="text-sm font-medium" for="cs-pkg">Community package</label>
-        <Input
-          id="cs-pkg"
-          v-model="form.communityPackage"
-          placeholder="vendor/starter-kit"
-          class="mt-2"
-        />
-      </div>
-
-      <div v-if="isJsKit" class="flex gap-4">
-        <div class="flex-1">
-          <label class="text-sm font-medium" for="cs-js">Frontend dependencies</label>
-          <Select
-            id="cs-js"
-            :model-value="form.js"
-            :options="[
-              { value: 'npm', label: 'Install & build with npm' },
-              { value: 'bun', label: 'Install & build with Bun' },
-              { value: 'skip', label: 'Skip (install later)' },
-            ]"
-            class="mt-2 w-full"
-            aria-label="Frontend dependencies"
-            @update:model-value="(v: string) => (form.js = v as JsRuntime)"
-          />
-          <p v-if="(needsNode || needsBun)" class="mt-1 text-xs text-muted-foreground">
-            {{ needsNode ? "Node" : "Bun" }} will be installed automatically.
-          </p>
-        </div>
-        <div class="flex-1">
-          <label class="text-sm font-medium" for="cs-auth">Authentication</label>
+        <div v-if="isLivewire" class="flex items-center justify-between gap-4">
+          <div>
+            <p class="text-sm font-medium">Authentication</p>
+          </div>
           <Select
-            id="cs-auth"
             :model-value="form.auth"
             :options="[
               { value: 'laravel', label: 'Built-in (Laravel)' },
               { value: 'work_os', label: 'WorkOS AuthKit' },
             ]"
-            class="mt-2 w-full"
+            class="w-48"
             aria-label="Authentication provider"
             @update:model-value="(v: string) => (form.auth = v as AuthProvider)"
           />
         </div>
-      </div>
-
-      <div v-if="isLivewire" class="flex items-center justify-between gap-4">
-        <div>
-          <p class="text-sm font-medium">Authentication</p>
-        </div>
-        <Select
-          :model-value="form.auth"
-          :options="[
-            { value: 'laravel', label: 'Built-in (Laravel)' },
-            { value: 'work_os', label: 'WorkOS AuthKit' },
-          ]"
-          class="w-48"
-          aria-label="Authentication provider"
-          @update:model-value="(v: string) => (form.auth = v as AuthProvider)"
-        />
-      </div>
 
-      <div v-if="hasAuthKit" class="space-y-3 rounded-lg border bg-muted/30 p-3">
-        <div v-if="isLivewire" class="flex items-center justify-between gap-4">
-          <span class="text-sm">Standalone Livewire class components</span>
-          <Switch v-model="form.livewireClassComponents" aria-label="Livewire class components" />
-        </div>
-        <div class="flex items-center justify-between gap-4">
-          <span class="text-sm">Team support</span>
-          <Switch v-model="form.teams" aria-label="Team support" />
+        <div v-if="hasAuthKit" class="space-y-3 rounded-lg border bg-muted/30 p-3">
+          <div v-if="isLivewire" class="flex items-center justify-between gap-4">
+            <span class="text-sm">Standalone Livewire class components</span>
+            <Switch v-model="form.livewireClassComponents" aria-label="Livewire class components" />
+          </div>
+          <div class="flex items-center justify-between gap-4">
+            <span class="text-sm">Team support</span>
+            <Switch v-model="form.teams" aria-label="Team support" />
+          </div>
         </div>
-      </div>
 
-      <p v-if="kitChoice === 'none'" class="text-xs text-muted-foreground">
-        No starter kit - a plain Laravel application with no auth scaffolding.
-      </p>
-    </div>
-
-    <!-- ── Step 3: Testing & data ── -->
-    <div v-else-if="step === 2" class="space-y-4">
-      <div class="flex gap-4">
-        <div class="flex-1">
-          <label class="text-sm font-medium" for="cs-test">Testing framework</label>
-          <Select
-            id="cs-test"
-            :model-value="form.testing"
-            :options="[
-              { value: 'pest', label: 'Pest' },
-              { value: 'php_unit', label: 'PHPUnit' },
-            ]"
-            class="mt-2 w-full"
-            aria-label="Testing framework"
-            @update:model-value="(v: string) => (form.testing = v as Testing)"
-          />
-        </div>
-        <div class="flex-1">
-          <label class="text-sm font-medium" for="cs-db">Database</label>
-          <Select
-            id="cs-db"
-            :model-value="form.database"
-            :options="[
-              { value: 'sqlite', label: 'SQLite' },
-              { value: 'mysql', label: 'MySQL' },
-              { value: 'mariadb', label: 'MariaDB' },
-              { value: 'pgsql', label: 'PostgreSQL' },
-              { value: 'sqlsrv', label: 'SQL Server' },
-            ]"
-            class="mt-2 w-full"
-            aria-label="Database"
-            @update:model-value="(v: string) => (form.database = v as Database)"
-          />
-        </div>
+        <p v-if="kitChoice === 'none'" class="text-xs text-muted-foreground">
+          No starter kit - a plain Laravel application with no auth scaffolding.
+        </p>
       </div>
-      <p v-if="form.database !== 'sqlite'" class="text-xs text-muted-foreground">
-        The driver is written to <code class="font-mono">.env</code>; provision the database
-        yourself (live DB setup lands with services).
-      </p>
+    </template>
 
-      <div class="space-y-3 rounded-lg border p-3">
-        <div class="flex items-center justify-between gap-4">
-          <div>
-            <p class="text-sm font-medium">Initialise git</p>
-            <p class="text-xs text-muted-foreground">Run <code class="font-mono">git init</code> in the new project.</p>
+    <template #step-2>
+      <div class="space-y-4">
+        <div class="flex gap-4">
+          <div class="flex-1">
+            <label class="text-sm font-medium" for="cs-test">Testing framework</label>
+            <Select
+              id="cs-test"
+              :model-value="form.testing"
+              :options="[
+                { value: 'pest', label: 'Pest' },
+                { value: 'php_unit', label: 'PHPUnit' },
+              ]"
+              class="mt-2 w-full"
+              aria-label="Testing framework"
+              @update:model-value="(v: string) => (form.testing = v as Testing)"
+            />
           </div>
-          <Switch v-model="form.git" aria-label="Initialise git" />
-        </div>
-        <div class="flex items-center justify-between gap-4">
-          <div>
-            <p class="text-sm font-medium">Laravel Boost</p>
-            <p class="text-xs text-muted-foreground">Install Boost for AI-assisted coding.</p>
+          <div class="flex-1">
+            <label class="text-sm font-medium" for="cs-db">Database</label>
+            <Select
+              id="cs-db"
+              :model-value="form.database"
+              :options="[
+                { value: 'sqlite', label: 'SQLite' },
+                { value: 'mysql', label: 'MySQL' },
+                { value: 'mariadb', label: 'MariaDB' },
+                { value: 'pgsql', label: 'PostgreSQL' },
+                { value: 'sqlsrv', label: 'SQL Server' },
+              ]"
+              class="mt-2 w-full"
+              aria-label="Database"
+              @update:model-value="(v: string) => (form.database = v as Database)"
+            />
           </div>
-          <Switch v-model="form.boost" aria-label="Laravel Boost" />
         </div>
-      </div>
-    </div>
-
-    <!-- ── Step 4: Review ── -->
-    <div v-else-if="step === 3" class="space-y-4">
-      <div class="rounded-lg border p-3 text-sm">
-        <dl class="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1.5">
-          <dt class="text-muted-foreground">Site</dt>
-          <dd class="font-mono">{{ domain }}</dd>
-          <dt class="text-muted-foreground">Path</dt>
-          <dd class="truncate font-mono">{{ projectPath }}</dd>
-          <dt class="text-muted-foreground">PHP</dt>
-          <dd>{{ form.php }}{{ form.secure ? " · HTTPS" : "" }}</dd>
-        </dl>
-      </div>
-
-      <p v-if="needsNode || needsBun" class="text-xs text-muted-foreground">
-        {{ needsNode ? "Node" : "Bun" }} will be installed automatically during creation.
-      </p>
-    </div>
+        <p v-if="form.database !== 'sqlite'" class="text-xs text-muted-foreground">
+          The driver is written to <code class="font-mono">.env</code>; provision the database
+          yourself (live DB setup lands with services).
+        </p>
 
-    <!-- ── Step 5: Progress ── -->
-    <div v-else class="space-y-4">
-      <div class="flex items-center">
-        <template v-for="(p, i) in PHASES" :key="p">
-          <div class="flex shrink-0 items-center gap-2">
-            <span
-              class="flex size-6 items-center justify-center rounded-full transition-colors"
-              :class="
-                phaseStatus(p) === 'done'
-                  ? 'bg-success text-white'
-                  : phaseStatus(p) === 'active'
-                    ? 'bg-brand text-white'
-                    : 'bg-muted text-muted-foreground'
-              "
-            >
-              <Check v-if="phaseStatus(p) === 'done'" class="size-3.5" />
-              <Loader2 v-else-if="phaseStatus(p) === 'active'" class="size-3.5 animate-spin" />
-              <Circle v-else class="size-2 fill-current" />
-            </span>
-            <span
-              class="text-xs"
-              :class="phaseStatus(p) === 'todo' ? 'text-muted-foreground' : 'font-medium'"
-            >{{ p }}</span>
+        <div class="space-y-3 rounded-lg border p-3">
+          <div class="flex items-center justify-between gap-4">
+            <div>
+              <p class="text-sm font-medium">Initialise git</p>
+              <p class="text-xs text-muted-foreground">
+                Run <code class="font-mono">git init</code> in the new project.
+              </p>
+            </div>
+            <Switch v-model="form.git" aria-label="Initialise git" />
           </div>
-          <span
-            v-if="i < PHASES.length - 1"
-            class="mx-2 h-0.5 flex-1 rounded-full transition-colors"
-            :class="phaseStatus(p) === 'done' ? 'bg-success' : 'bg-border'"
-          />
-        </template>
-      </div>
-      <p v-if="phase && !PHASES.includes(phase) && jobStateRef === 'running'" class="text-xs text-muted-foreground">
-        {{ phase }}…
-      </p>
-
-      <pre
-        ref="logBox"
-        class="h-56 overflow-y-auto whitespace-pre-wrap rounded-lg bg-zinc-950 p-3 font-mono text-[11px] leading-relaxed text-zinc-200"
-      >{{ log.join("\n") || "Starting…" }}</pre>
-
-      <div
-        v-if="jobStateRef === 'succeeded'"
-        class="flex items-center gap-2 rounded-lg border border-success/40 bg-success/10 p-3 text-sm text-success"
-      >
-        <CheckCircle2 class="size-4" /> {{ domain }} is ready.
-      </div>
-      <div
-        v-else-if="jobStateRef === 'failed'"
-        class="rounded-lg border border-destructive/40 bg-destructive/10 p-3 text-sm text-destructive"
-      >
-        {{ jobError || "Creation failed." }}
-      </div>
-      <div
-        v-else-if="jobStateRef === 'cancelled'"
-        class="rounded-lg border p-3 text-sm text-muted-foreground"
-      >
-        Cancelled.
+          <div class="flex items-center justify-between gap-4">
+            <div>
+              <p class="text-sm font-medium">Laravel Boost</p>
+              <p class="text-xs text-muted-foreground">Install Boost for AI-assisted coding.</p>
+            </div>
+            <Switch v-model="form.boost" aria-label="Laravel Boost" />
+          </div>
+        </div>
       </div>
-    </div>
     </template>
 
-    <!-- ── footer ── -->
-    <template #footer="{ close: modalClose }">
-      <!-- Checking toolchain -->
-      <template v-if="toolsLoading">
-        <Button variant="ghost" @click="modalClose">Cancel</Button>
-      </template>
-
-      <!-- Prerequisites gate: install everything missing, then unlock. -->
-      <template v-else-if="!ready">
-        <Button variant="ghost" @click="modalClose">Cancel</Button>
-        <Button :disabled="installBusy" @click="installAllMissing">
-          <Spinner v-if="installingAll" class="size-4" /> Install missing tools
-        </Button>
-      </template>
-
-      <!-- Progress step has its own controls -->
-      <template v-else-if="step === 4">
-        <template v-if="busy">
-          <Button variant="ghost" :disabled="cancelRequested" @click="cancelJob">
-            {{ cancelRequested ? "Cancelling…" : "Cancel" }}
-          </Button>
-        </template>
-        <template v-else-if="jobStateRef === 'succeeded'">
-          <Button variant="outline" @click="openPath(projectPath)">
-            <FolderOpen class="size-4" /> Open folder
-          </Button>
-          <Button variant="outline" @click="openInBrowser(openUrl)">
-            <ExternalLink class="size-4" /> Open in browser
-          </Button>
-          <Button @click="modalClose">Done</Button>
-        </template>
-        <template v-else>
-          <Button variant="ghost" @click="step = 3">
-            <ChevronLeft class="size-4" /> Back
-          </Button>
-          <Button @click="modalClose">Close</Button>
-        </template>
-      </template>
-
-      <!-- Wizard steps -->
-      <template v-else>
-        <Button v-if="step > 0" variant="ghost" @click="step = (step - 1) as Step">
-          <ChevronLeft class="size-4" /> Back
-        </Button>
-        <Button v-else variant="ghost" @click="modalClose">Cancel</Button>
+    <template #step-3>
+      <div class="space-y-4">
+        <div class="rounded-lg border p-3 text-sm">
+          <dl class="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1.5">
+            <dt class="text-muted-foreground">Site</dt>
+            <dd class="font-mono">{{ domain }}</dd>
+            <dt class="text-muted-foreground">Path</dt>
+            <dd class="truncate font-mono">{{ projectPath }}</dd>
+            <dt class="text-muted-foreground">PHP</dt>
+            <dd>{{ form.php }}{{ form.secure ? " · HTTPS" : "" }}</dd>
+          </dl>
+        </div>
 
-        <Button v-if="step === 0" :disabled="!basicsValid" @click="step = 1">Next</Button>
-        <Button v-else-if="step === 1" :disabled="!stackValid" @click="step = 2">Next</Button>
-        <Button v-else-if="step === 2" @click="step = 3">Next</Button>
-        <Button v-else :disabled="!ready" @click="startCreate">Create site</Button>
-      </template>
+        <p v-if="needsNode || needsBun" class="text-xs text-muted-foreground">
+          {{ needsNode ? "Node" : "Bun" }} will be installed automatically during creation.
+        </p>
+      </div>
     </template>
-  </Modal>
+  </CreateSiteWizardShell>
 </template>
-
-<style scoped>
-/* Chevron/arrow breadcrumb: a right-pointing point with a matching concave
-   left notch so the segments read as forward-pointing arrows. The first
-   segment is flat on its left edge. */
-.step-chevron {
-  clip-path: polygon(
-    0 0,
-    calc(100% - 10px) 0,
-    100% 50%,
-    calc(100% - 10px) 100%,
-    0 100%,
-    10px 50%
-  );
-}
-.step-chevron:first-child {
-  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
-}
-/* The final segment has no next step, so it's a flat-right square (still notched
-   on the left to receive the previous arrow). */
-.step-chevron:last-child {
-  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10px 50%);
-}
-/* 1px separator on the arrow junction. clip-path eats normal borders, so a
-   drop-shadow offset *left* traces the segment's notch edge on top of the
-   previous segment's arrow (a right offset would be hidden under the overlap). */
-.step-chevron-sep {
-  filter: drop-shadow(-2.5px 0 0 #a1a1aa);
-}
-</style>
diff --git a/apps/yerd-gui/src/components/site-create/CreateSiteWizardShell.vue b/apps/yerd-gui/src/components/site-create/CreateSiteWizardShell.vue
new file mode 100644
index 00000000..c8511b97
--- /dev/null
+++ b/apps/yerd-gui/src/components/site-create/CreateSiteWizardShell.vue
@@ -0,0 +1,343 @@
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import {
+  Check,
+  CheckCircle2,
+  ChevronLeft,
+  Circle,
+  ExternalLink,
+  FolderOpen,
+  Loader2,
+  TriangleAlert,
+} from "lucide-vue-next";
+
+import Button from "@/components/ui/Button.vue";
+import Modal from "@/components/ui/Modal.vue";
+import Spinner from "@/components/ui/Spinner.vue";
+import { phaseStatus, useCreateSiteJob } from "@/composables/useCreateSiteJob";
+import type { PrereqRow, ToolPrereqs } from "@/composables/useToolPrereqs";
+import { openInBrowser, openPath } from "@/ipc/client";
+import type { CreateSiteSpec } from "@/ipc/types";
+
+/**
+ * The frame every create-site wizard shares: the toolchain check and
+ * prerequisites gate, the step indicator, the create job's progress view and
+ * all footers. A wizard supplies its input steps as `step-0`…`step-N` slots
+ * (Review included), plus its form's validity per step and its spec.
+ */
+const props = defineProps<{
+  open: boolean;
+  title: string;
+  /** Labels of the input steps; the progress view follows the last one. */
+  steps: string[];
+  /** Whether each input step may be left forwards (Next, or Create site on the last). */
+  stepValid: boolean[];
+  buildSpec: () => CreateSiteSpec;
+  /** The daemon's phase names for this framework's job, in order. */
+  phases: string[];
+  domain: string;
+  projectPath: string;
+  openUrl: string;
+  prereqs: ToolPrereqs;
+  prereqRows: PrereqRow[];
+  /** What the prerequisites gate says the framework needs. */
+  prereqSummary: string;
+  /** Whether the required toolchain is present, unlocking the steps. */
+  ready: boolean;
+  installAll: () => Promise<void>;
+}>();
+const emit = defineEmits<{
+  (e: "update:open", v: boolean): void;
+  (e: "created"): void;
+  /** The wizard should restore its form defaults and refresh what it lists. */
+  (e: "reset"): void;
+}>();
+
+const {
+  state: jobState,
+  phase,
+  log,
+  error: jobError,
+  cancelRequested,
+  inFlight,
+  start,
+  cancel,
+  reset: resetJob,
+} = useCreateSiteJob({
+  isOpen: () => props.open,
+  domain: () => props.domain,
+  onCreated: () => emit("created"),
+});
+
+const step = ref(0);
+const progressStep = computed(() => props.steps.length);
+const lastStep = computed(() => props.steps.length - 1);
+const busy = computed(() => jobState.value === "running" && step.value === progressStep.value);
+
+const installLogBox = ref<HTMLElement | null>(null);
+const logBox = ref<HTMLElement | null>(null);
+
+function scrollToEnd(el: HTMLElement | null): void {
+  if (el) el.scrollTop = el.scrollHeight;
+}
+
+watch(
+  () => props.prereqs.installLog.length,
+  () => scrollToEnd(installLogBox.value),
+  { flush: "post" },
+);
+watch(
+  () => log.value.length,
+  () => scrollToEnd(logBox.value),
+  { flush: "post" },
+);
+
+function startCreate(): void {
+  step.value = progressStep.value;
+  void start(props.buildSpec());
+}
+
+/** A create keeps running while the dialog is closed; reopening mid-create resumes its progress. */
+watch(
+  () => props.open,
+  (open) => {
+    if (open && !inFlight.value) {
+      step.value = 0;
+      resetJob();
+      emit("reset");
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <Modal :open="open" :title="title" size="lg" @update:open="(v) => emit('update:open', v)">
+    <div v-if="prereqs.loading" class="flex items-center justify-center py-12">
+      <Spinner class="size-6" />
+    </div>
+
+    <div v-else-if="!ready" class="space-y-4">
+      <div class="flex items-start gap-2 rounded-lg border border-warning/40 bg-warning/10 p-3">
+        <TriangleAlert class="mt-0.5 size-4 shrink-0 text-warning" />
+        <div>
+          <p class="text-sm font-medium">A few tools are needed first</p>
+          <p class="text-xs text-muted-foreground">
+            {{ prereqSummary }} Install the missing ones to continue.
+          </p>
+        </div>
+      </div>
+
+      <div class="divide-y rounded-lg border">
+        <div
+          v-for="row in prereqRows"
+          :key="row.id"
+          class="flex items-center justify-between gap-3 px-3 py-2.5"
+        >
+          <div class="min-w-0">
+            <p class="text-sm font-medium">{{ row.label }}</p>
+            <p class="text-xs text-muted-foreground">{{ row.sub }}</p>
+          </div>
+          <div class="flex shrink-0 items-center gap-2">
+            <span v-if="row.ok" class="flex items-center gap-1 text-xs text-success">
+              <CheckCircle2 class="size-4" /> Installed
+            </span>
+            <template v-else>
+              <Spinner v-if="prereqs.installingTool === row.id" class="size-4" />
+              <Button
+                v-else
+                size="sm"
+                variant="outline"
+                :disabled="prereqs.busy || !!row.blockedReason"
+                :title="row.blockedReason ?? ''"
+                @click="row.install()"
+              >
+                Install
+              </Button>
+            </template>
+          </div>
+        </div>
+      </div>
+
+      <pre
+        v-if="prereqs.installLog.length"
+        ref="installLogBox"
+        class="h-40 overflow-y-auto whitespace-pre-wrap rounded-lg bg-zinc-950 p-3 font-mono text-[11px] leading-relaxed text-zinc-200"
+      >{{ prereqs.installLog.join("\n") }}</pre>
+    </div>
+
+    <template v-else>
+      <div v-if="step < progressStep" class="mb-6 flex w-full">
+        <div
+          v-for="(label, i) in steps"
+          :key="label"
+          class="step-chevron -ml-2.5 flex h-9 flex-1 items-center justify-center gap-1.5 pl-5 pr-1 text-xs font-medium transition-colors first:ml-0 first:pl-3"
+          :class="[
+            i < step
+              ? 'bg-brand/70 text-white'
+              : i === step
+                ? 'bg-brand text-white'
+                : 'bg-muted text-muted-foreground',
+            i !== step && i !== 0 ? 'step-chevron-sep' : '',
+          ]"
+        >
+          <Check v-if="i < step" class="size-3.5 shrink-0" />
+          <span>{{ label }}</span>
+        </div>
+      </div>
+
+      <slot v-if="step < progressStep" :name="`step-${step}`" />
+
+      <div v-else class="space-y-4">
+        <div
+          class="grid"
+          :style="{ gridTemplateColumns: `repeat(${phases.length}, minmax(0, 1fr))` }"
+        >
+          <div v-for="(p, i) in phases" :key="p" class="flex flex-col items-center gap-1.5 px-0.5">
+            <div class="relative flex w-full items-center justify-center">
+              <span
+                v-if="i < phases.length - 1"
+                class="absolute left-1/2 top-1/2 z-0 h-0.5 w-full -translate-y-1/2 rounded-full transition-colors"
+                :class="
+                  phaseStatus(phases, phase, jobState, p) === 'done' ? 'bg-success' : 'bg-border'
+                "
+              />
+              <span
+                class="relative z-10 flex size-6 shrink-0 items-center justify-center rounded-full transition-colors"
+                :class="
+                  phaseStatus(phases, phase, jobState, p) === 'done'
+                    ? 'bg-success text-white'
+                    : phaseStatus(phases, phase, jobState, p) === 'active'
+                      ? 'bg-brand text-white'
+                      : 'bg-muted text-muted-foreground'
+                "
+              >
+                <Check v-if="phaseStatus(phases, phase, jobState, p) === 'done'" class="size-3.5" />
+                <Loader2
+                  v-else-if="phaseStatus(phases, phase, jobState, p) === 'active'"
+                  class="size-3.5 animate-spin"
+                />
+                <Circle v-else class="size-2 fill-current" />
+              </span>
+            </div>
+            <span
+              class="text-center text-[11px] leading-tight"
+              :class="
+                phaseStatus(phases, phase, jobState, p) === 'todo'
+                  ? 'text-muted-foreground'
+                  : 'font-medium'
+              "
+            >{{ p }}</span>
+          </div>
+        </div>
+        <p
+          v-if="phase && !phases.includes(phase) && jobState === 'running'"
+          class="text-xs text-muted-foreground"
+        >
+          {{ phase }}…
+        </p>
+
+        <pre
+          ref="logBox"
+          class="h-56 overflow-y-auto whitespace-pre-wrap rounded-lg bg-zinc-950 p-3 font-mono text-[11px] leading-relaxed text-zinc-200"
+        >{{ log.join("\n") || "Starting…" }}</pre>
+
+        <div
+          v-if="jobState === 'succeeded'"
+          class="flex items-center gap-2 rounded-lg border border-success/40 bg-success/10 p-3 text-sm text-success"
+        >
+          <CheckCircle2 class="size-4" /> {{ domain }} is ready.
+        </div>
+        <div
+          v-else-if="jobState === 'failed'"
+          class="rounded-lg border border-destructive/40 bg-destructive/10 p-3 text-sm text-destructive"
+        >
+          {{ jobError || "Creation failed." }}
+        </div>
+        <div
+          v-else-if="jobState === 'cancelled'"
+          class="rounded-lg border p-3 text-sm text-muted-foreground"
+        >
+          Cancelled.
+        </div>
+      </div>
+    </template>
+
+    <template #footer="{ close: modalClose }">
+      <template v-if="prereqs.loading">
+        <Button variant="ghost" @click="modalClose">Cancel</Button>
+      </template>
+
+      <template v-else-if="!ready">
+        <Button variant="ghost" @click="modalClose">Cancel</Button>
+        <Button :disabled="prereqs.busy" @click="installAll">
+          <Spinner v-if="prereqs.installingAll" class="size-4" /> Install missing tools
+        </Button>
+      </template>
+
+      <template v-else-if="step === progressStep">
+        <template v-if="busy">
+          <Button variant="ghost" :disabled="cancelRequested" @click="cancel">
+            {{ cancelRequested ? "Cancelling…" : "Cancel" }}
+          </Button>
+        </template>
+        <template v-else-if="jobState === 'succeeded'">
+          <Button variant="outline" @click="openPath(projectPath)">
+            <FolderOpen class="size-4" /> Open folder
+          </Button>
+          <slot name="success-actions" />
+          <Button variant="outline" @click="openInBrowser(openUrl)">
+            <ExternalLink class="size-4" /> Open in browser
+          </Button>
+          <Button @click="modalClose">Done</Button>
+        </template>
+        <template v-else>
+          <Button variant="ghost" @click="step = lastStep">
+            <ChevronLeft class="size-4" /> Back
+          </Button>
+          <Button @click="modalClose">Close</Button>
+        </template>
+      </template>
+
+      <template v-else>
+        <Button v-if="step > 0" variant="ghost" @click="step -= 1">
+          <ChevronLeft class="size-4" /> Back
+        </Button>
+        <Button v-else variant="ghost" @click="modalClose">Cancel</Button>
+
+        <Button v-if="step < lastStep" :disabled="!stepValid[step]" @click="step += 1">
+          Next
+        </Button>
+        <Button v-else :disabled="!ready || !stepValid[lastStep]" @click="startCreate">
+          Create site
+        </Button>
+      </template>
+    </template>
+  </Modal>
+</template>
+
+<style scoped>
+/* Chevron breadcrumb: each segment points right with a matching notch on its
+   left; the first is flat on the left and the last flat on the right. */
+.step-chevron {
+  clip-path: polygon(
+    0 0,
+    calc(100% - 10px) 0,
+    100% 50%,
+    calc(100% - 10px) 100%,
+    0 100%,
+    10px 50%
+  );
+}
+.step-chevron:first-child {
+  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
+}
+.step-chevron:last-child {
+  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10px 50%);
+}
+/* clip-path eats borders, so a left-offset drop-shadow traces the notch edge
+   over the previous segment's arrow as a 1px separator. */
+.step-chevron-sep {
+  filter: drop-shadow(-2.5px 0 0 #a1a1aa);
+}
+</style>
diff --git a/apps/yerd-gui/src/components/site-create/CreateWordPressWizard.spec.ts b/apps/yerd-gui/src/components/site-create/CreateWordPressWizard.spec.ts
new file mode 100644
index 00000000..07ddfb33
--- /dev/null
+++ b/apps/yerd-gui/src/components/site-create/CreateWordPressWizard.spec.ts
@@ -0,0 +1,316 @@
+import { flushPromises, mount } from "@vue/test-utils";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import CreateWordPressWizard from "./CreateWordPressWizard.vue";
+import type { ServiceStatus, ToolStatus } from "@/ipc/types";
+
+const createSite = vi.hoisted(() => vi.fn());
+const jobStatus = vi.hoisted(() => vi.fn());
+const listTools = vi.hoisted(() => vi.fn());
+const listServices = vi.hoisted(() => vi.fn());
+const availableWordPressVersions = vi.hoisted(() => vi.fn());
+const installToolStreamed = vi.hoisted(() => vi.fn());
+const pollJobToEnd = vi.hoisted(() => vi.fn());
+const toastSuccess = vi.hoisted(() => vi.fn());
+const toastError = vi.hoisted(() => vi.fn());
+
+vi.mock("@/ipc/client", () => ({
+  IpcError: class IpcError extends Error {},
+  availablePhp: vi.fn(),
+  availableWordPressVersions,
+  createSite,
+  installPhpWithProgress: vi.fn(),
+  installToolStreamed,
+  jobCancel: vi.fn().mockResolvedValue(undefined),
+  jobStatus,
+  listServices,
+  listTools,
+  mintWordPressLoginToken: vi.fn(),
+  openInBrowser: vi.fn(),
+  openPath: vi.fn(),
+  pickDirectory: vi.fn(),
+  pollJobToEnd,
+}));
+
+vi.mock("@/composables/useDaemon", () => ({
+  useDaemon: () => ({ refresh: vi.fn() }),
+}));
+
+vi.mock("@/composables/useToast", () => ({
+  useToast: () => ({ success: toastSuccess, error: toastError }),
+}));
+
+function tool(id: string, overrides: Partial<ToolStatus> = {}): ToolStatus {
+  return { id, display_name: id, installed: true, version: "1.0", binaries: [id], ...overrides };
+}
+
+function service(id: string, overrides: Partial<ServiceStatus> = {}): ServiceStatus {
+  return {
+    service: id,
+    display_name: id,
+    installed_versions: ["1"],
+    selected_version: "1",
+    state: "stopped",
+    pid: null,
+    listen: null,
+    port: 3306,
+    enabled: true,
+    supports_databases: true,
+    ...overrides,
+  };
+}
+
+function status(state: string, error: string | null = null) {
+  return { log: [], next_cursor: 0, phase: "Installing", state, error };
+}
+
+async function openWizard(phpVersions = ["8.3", "8.4"], defaultPhp = "") {
+  const w = mount(CreateWordPressWizard, {
+    props: {
+      open: false,
+      parkedFolders: ["/srv"],
+      phpVersions,
+      defaultPhp,
+      tld: "test",
+      report: null,
+    },
+    global: { stubs: { teleport: true } },
+  });
+  await w.setProps({ open: true });
+  await flushPromises();
+  return w;
+}
+
+type Wizard = Awaited<ReturnType<typeof openWizard>>;
+
+function byText(w: Wizard, text: string) {
+  return w.findAll("button").find((b) => b.text().includes(text));
+}
+
+async function next(w: Wizard) {
+  await byText(w, "Next")!.trigger("click");
+}
+
+async function toReview(w: Wizard, name = "blog") {
+  await w.find("#wp-cs-name").setValue(name);
+  await next(w);
+  await w.find("#wp-cs-title").setValue("My Blog");
+  await next(w);
+  await next(w);
+}
+
+async function create(w: Wizard) {
+  await byText(w, "Create site")!.trigger("click");
+  await flushPromises();
+}
+
+describe("CreateWordPressWizard", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    listTools.mockResolvedValue([tool("wp-cli")]);
+    listServices.mockResolvedValue([]);
+    availableWordPressVersions.mockResolvedValue([]);
+    createSite.mockResolvedValue("job-1");
+    jobStatus.mockResolvedValue(status("succeeded"));
+  });
+
+  it("is titled for WordPress", async () => {
+    const w = await openWizard();
+    expect(w.text()).toContain("Create a new WordPress site");
+  });
+
+  it("submits the default spec with a derived database name on the first PHP", async () => {
+    const w = await openWizard();
+    await toReview(w, "my-blog");
+    await create(w);
+
+    expect(createSite).toHaveBeenCalledWith({
+      name: "my-blog",
+      parent_dir: "/srv",
+      php: "8.3",
+      secure: false,
+      framework: {
+        framework: "wordpress",
+        options: {
+          core_version: null,
+          locale: "en_US",
+          admin_user: "admin",
+          admin_email: "test@example.com",
+          admin_password: expect.stringMatching(/^.{20}$/),
+          site_title: "My Blog",
+          table_prefix: "wp_",
+          database: { engine: "mysql", name: "my_blog" },
+        },
+      },
+    });
+    expect(w.emitted("created")).toBeTruthy();
+  });
+
+  it("prefers the configured default PHP", async () => {
+    const w = await openWizard(["8.3", "8.4"], "8.4");
+    expect((w.find("#wp-cs-php").element as HTMLSelectElement).value).toBe("8.4");
+  });
+
+  it("only fills an empty PHP selection when the installed versions change", async () => {
+    const empty = await openWizard([], "");
+    await empty.setProps({ phpVersions: ["8.2", "8.4"] });
+    expect((empty.find("#wp-cs-php").element as HTMLSelectElement).value).toBe("8.2");
+
+    const w = await openWizard(["8.3", "8.4"], "");
+    await w.setProps({ phpVersions: ["8.4"] });
+    await toReview(w);
+    expect(w.text()).toContain("8.3");
+  });
+
+  it("labels legacy PHP and explains it", async () => {
+    const w = await openWizard(["7.4", "8.4"], "8.4");
+    expect(w.find("#wp-cs-php").text()).toContain("PHP 7.4 (legacy)");
+    expect(w.text()).not.toContain("Out of support");
+    await w.find("#wp-cs-php").setValue("7.4");
+    expect(w.text()).toContain("Out of support");
+  });
+
+  it("gates the WordPress and Database steps", async () => {
+    const w = await openWizard();
+    await w.find("#wp-cs-name").setValue("blog");
+    await next(w);
+    expect(byText(w, "Next")!.attributes("disabled")).toBeDefined();
+    await w.find("#wp-cs-title").setValue("My Blog");
+    await w.find("#wp-cs-admin-email").setValue("nope");
+    expect(byText(w, "Next")!.attributes("disabled")).toBeDefined();
+    await w.find("#wp-cs-admin-email").setValue("a@b.co");
+    await next(w);
+    await w.find("#wp-cs-dbname").setValue("1bad");
+    expect(byText(w, "Next")!.attributes("disabled")).toBeDefined();
+  });
+
+  it("keeps a database name the user edited", async () => {
+    const w = await openWizard();
+    await w.find("#wp-cs-name").setValue("blog");
+    await next(w);
+    await w.find("#wp-cs-title").setValue("My Blog");
+    await next(w);
+    await w.find("#wp-cs-dbname").setValue("custom_db");
+    await byText(w, "Back")!.trigger("click");
+    await byText(w, "Back")!.trigger("click");
+    await w.find("#wp-cs-name").setValue("renamed");
+    await next(w);
+    await next(w);
+    expect((w.find("#wp-cs-dbname").element as HTMLInputElement).value).toBe("custom_db");
+  });
+
+  it("preselects a running database engine", async () => {
+    listServices.mockResolvedValue([
+      service("mysql"),
+      service("mariadb", { state: "running" }),
+    ]);
+    const w = await openWizard();
+    await toReview(w);
+    await create(w);
+    expect(createSite.mock.calls[0][0].framework.options.database.engine).toBe("mariadb");
+  });
+
+  it("clears the core version when the PHP change makes it incompatible", async () => {
+    availableWordPressVersions.mockResolvedValue([
+      { branch: "6.7", latest: "6.7.2", min_php: "7.2", max_php: "8.3" },
+    ]);
+    const w = await openWizard(["8.3", "8.4"], "8.3");
+    await w.find("#wp-cs-name").setValue("blog");
+    await next(w);
+    await w.find("#wp-cs-version").setValue("6.7.2");
+    await byText(w, "Back")!.trigger("click");
+    await w.find("#wp-cs-php").setValue("8.4");
+    await next(w);
+    await w.find("#wp-cs-title").setValue("My Blog");
+    await next(w);
+    await next(w);
+    expect(w.text()).toContain("Latest · en_US");
+    await create(w);
+    expect(createSite.mock.calls[0][0].framework.options.core_version).toBeNull();
+  });
+
+  it("keeps a compatible core version", async () => {
+    availableWordPressVersions.mockResolvedValue([
+      { branch: "6.7", latest: "6.7.2", min_php: "7.2", max_php: "8.4" },
+    ]);
+    const w = await openWizard(["8.3", "8.4"], "8.3");
+    await w.find("#wp-cs-name").setValue("blog");
+    await next(w);
+    await w.find("#wp-cs-version").setValue("6.7.2");
+    await byText(w, "Back")!.trigger("click");
+    await w.find("#wp-cs-php").setValue("8.4");
+    await next(w);
+    await w.find("#wp-cs-title").setValue("My Blog");
+    await next(w);
+    await next(w);
+    await create(w);
+    expect(createSite.mock.calls[0][0].framework.options.core_version).toBe("6.7.2");
+  });
+
+  it("lists Composer only while WP-CLI still has to be built", async () => {
+    listTools.mockResolvedValue([tool("composer")]);
+    const w = await openWizard();
+    expect(w.text()).toContain("Builds WP-CLI");
+
+    listTools.mockResolvedValue([tool("wp-cli")]);
+    const noPhp = await openWizard([], "");
+    expect(noPhp.text()).toContain("A few tools are needed first");
+    expect(noPhp.text()).not.toContain("Builds WP-CLI");
+  });
+
+  it("blocks the WP-CLI row until Yerd's own Composer is present", async () => {
+    listTools.mockResolvedValue([tool("composer", { installed: false, external: true })]);
+    const w = await openWizard();
+    const installs = w.findAll("button").filter((b) => b.text() === "Install");
+    const install = installs[installs.length - 1];
+    expect(install.attributes("disabled")).toBeDefined();
+    expect(install.attributes("title")).toContain("Composer is required to build WP-CLI");
+  });
+
+  it("installs Composer before WP-CLI", async () => {
+    listTools.mockResolvedValueOnce([]).mockResolvedValue([tool("composer")]);
+    installToolStreamed.mockImplementation(async (id: string) => `install-${id}`);
+    pollJobToEnd.mockResolvedValue({ state: "succeeded", error: null });
+    const w = await openWizard();
+
+    await byText(w, "Install missing tools")!.trigger("click");
+    await flushPromises();
+    expect(installToolStreamed.mock.calls.map((c) => c[0])).toEqual(["composer", "wp-cli"]);
+    expect(toastSuccess).toHaveBeenCalledWith("Toolchain ready");
+  });
+
+  it("offers WP Admin between Open folder and Open in browser", async () => {
+    const w = await openWizard();
+    await toReview(w);
+    await create(w);
+    const footer = w
+      .findAll("button")
+      .map((b) => b.text().trim())
+      .filter((t) => ["Open folder", "WP Admin", "Open in browser", "Done"].includes(t));
+    expect(footer).toEqual(["Open folder", "WP Admin", "Open in browser", "Done"]);
+  });
+
+  it("returns to Review with the form kept after a failed create", async () => {
+    jobStatus.mockResolvedValue(status("failed", "download failed"));
+    const w = await openWizard();
+    await toReview(w);
+    await create(w);
+
+    expect(w.text()).toContain("download failed");
+    await byText(w, "Back")!.trigger("click");
+    expect(w.text()).toContain("blog.test");
+    expect(byText(w, "Create site")).toBeTruthy();
+  });
+
+  it("resets the form when reopened after a finished create", async () => {
+    const w = await openWizard();
+    await toReview(w);
+    await create(w);
+    expect(w.text()).toContain("blog.test is ready");
+
+    await w.setProps({ open: false });
+    await w.setProps({ open: true });
+    await flushPromises();
+    expect((w.find("#wp-cs-name").element as HTMLInputElement).value).toBe("");
+  });
+});
diff --git a/apps/yerd-gui/src/components/site-create/CreateWordPressWizard.vue b/apps/yerd-gui/src/components/site-create/CreateWordPressWizard.vue
index 5ddcd4ce..dadd61d2 100644
--- a/apps/yerd-gui/src/components/site-create/CreateWordPressWizard.vue
+++ b/apps/yerd-gui/src/components/site-create/CreateWordPressWizard.vue
@@ -1,52 +1,28 @@
 <script setup lang="ts">
-import { computed, nextTick, onUnmounted, reactive, ref, watch } from "vue";
-import {
-  Check,
-  CheckCircle2,
-  ChevronLeft,
-  Circle,
-  ExternalLink,
-  FolderOpen,
-  Loader2,
-  RefreshCw,
-  TriangleAlert,
-} from "lucide-vue-next";
+import { computed, reactive, ref, watch } from "vue";
+import { ExternalLink, RefreshCw } from "lucide-vue-next";
 
+import CreateSiteWizardShell from "@/components/site-create/CreateSiteWizardShell.vue";
+import SiteBasicsStep from "@/components/site-create/SiteBasicsStep.vue";
 import Button from "@/components/ui/Button.vue";
 import Combobox from "@/components/ui/Combobox.vue";
 import Input from "@/components/ui/Input.vue";
-import Modal from "@/components/ui/Modal.vue";
 import Select from "@/components/ui/Select.vue";
-import Switch from "@/components/ui/Switch.vue";
-import Spinner from "@/components/ui/Spinner.vue";
+import { useSiteBasics } from "@/composables/useSiteBasics";
+import { type PrereqRow, useToolPrereqs } from "@/composables/useToolPrereqs";
 import { isLegacyVersion, phpVersionInRange } from "@/lib/phpVersion";
-import { isUnbound, siteUrl, wpAdminLoginUrl, wpAdminUrl } from "@/lib/siteUrl";
+import { isUnbound, wpAdminLoginUrl, wpAdminUrl } from "@/lib/siteUrl";
 import { WORDPRESS_LOCALES } from "@/lib/wordpressLocales";
-import { useDaemon } from "@/composables/useDaemon";
-import { useToast } from "@/composables/useToast";
 import {
-  availablePhp,
   availableWordPressVersions,
-  createSite,
-  installPhpWithProgress,
-  installToolStreamed,
-  IpcError,
-  jobCancel,
-  jobStatus,
   listServices,
-  listTools,
   mintWordPressLoginToken,
   openInBrowser,
-  openPath,
-  pickDirectory,
-  pollJobToEnd,
 } from "@/ipc/client";
 import type {
   CreateSiteSpec,
-  JobState,
   ServiceStatus,
   StatusReport,
-  ToolStatus,
   WordPressDbEngine,
   WordPressOptions,
   WordPressVersionInfo,
@@ -67,21 +43,22 @@ const emit = defineEmits<{
   (e: "created"): void;
 }>();
 
-const toast = useToast();
-const { refresh } = useDaemon();
-
-// ── wizard state ─────────────────────────────────────────────────────────────
-type Step = 0 | 1 | 2 | 3 | 4; // Basics, WordPress, Database, Review, Progress
-const step = ref<Step>(0);
-
-const STEP_LABELS = ["Basics", "WordPress", "Database", "Review"];
+/** Mirrors the `set_phase` strings `bin/yerdd/src/create_site/wordpress.rs::run` emits, in order. */
+const PHASES = [
+  "Preflight",
+  "Provisioning database",
+  "Downloading WordPress",
+  "Configuring",
+  "Installing",
+  "Registering",
+  "Done",
+];
 
 const form = reactive({
   name: "",
   location: "",
   php: "",
   secure: false,
-  // WordPress
   coreVersion: "",
   locale: "en_US",
   adminUser: "admin",
@@ -89,14 +66,17 @@ const form = reactive({
   adminPassword: randomPassword(),
   siteTitle: "",
   tablePrefix: "wp_",
-  // database
   dbEngine: "mysql" as WordPressDbEngine,
   dbName: "",
 });
 let dbNameTouched = false;
+const { siteName, nameValid, projectPath, domain, openUrl, basicsValid } = useSiteBasics(
+  form,
+  props,
+);
 
-// A native <select> can't host a Badge, so legacy is called out in the option
-// label itself and expanded on by the hint below the picker.
+/** A native `<select>` can't host a Badge, so legacy is called out in the option
+ *  label itself and expanded on by the hint below the picker. */
 const phpOptions = computed(() =>
   props.phpVersions.map((v) => ({
     value: v,
@@ -104,49 +84,30 @@ const phpOptions = computed(() =>
   })),
 );
 const phpIsLegacy = computed(() => !!form.php && isLegacyVersion(form.php));
-const locationOptions = computed(() => {
-  const opts = props.parkedFolders.map((f) => ({ value: f, label: `${f}  (parked)` }));
-  if (form.location && !props.parkedFolders.includes(form.location)) {
-    opts.unshift({ value: form.location, label: form.location });
-  }
-  return opts;
-});
 
-const nameValid = computed(() => /^[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?$/i.test(form.name.trim()));
-const projectPath = computed(() =>
-  form.location ? `${form.location}/${form.name.trim()}` : "",
-);
-const domain = computed(() => `${form.name.trim().toLowerCase() || "name"}.${props.tld}`);
-const openUrl = computed(() =>
-  siteUrl({ name: form.name.trim().toLowerCase() || "name", secure: form.secure }, props.report),
-);
 const adminUrl = computed(() =>
-  wpAdminUrl({ name: form.name.trim().toLowerCase() || "name", secure: form.secure }, props.report),
+  wpAdminUrl({ name: siteName.value || "name", secure: form.secure }, props.report),
 );
 
 /**
- * "WP Admin" action on the post-creation success screen: one-click,
- * pre-authenticated login when possible, falling back to the plain
- * (not signed-in) link when unbound/resolver-off, or if minting a token
- * fails for any reason - never blocks or surfaces an error.
+ * "WP Admin" on the success screen: a one-click, pre-authenticated login when
+ * possible, falling back to the plain (not signed-in) link when unbound or if
+ * minting a token fails for any reason. It never blocks or surfaces an error.
  */
 async function openWpAdmin(): Promise<void> {
-  const site = { name: form.name.trim().toLowerCase(), secure: form.secure };
+  const site = { name: siteName.value, secure: form.secure };
   if (!isUnbound(props.report)) {
-    try {
-      const token = await mintWordPressLoginToken(site.name);
-      await openInBrowser(wpAdminLoginUrl(site, props.report, token));
-      return;
-    } catch {
-      /* fall through to the plain link below */
-    }
+    const signedIn = await mintWordPressLoginToken(site.name)
+      .then((token) => openInBrowser(wpAdminLoginUrl(site, props.report, token)))
+      .then(
+        () => true,
+        () => false,
+      );
+    if (signedIn) return;
   }
   await openInBrowser(adminUrl.value);
 }
 
-const basicsValid = computed(
-  () => nameValid.value && form.location.trim() !== "" && form.php !== "",
-);
 const emailValid = computed(() => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.adminEmail.trim()));
 const wordpressValid = computed(
   () =>
@@ -157,16 +118,17 @@ const wordpressValid = computed(
 );
 const dbNameValid = computed(() => /^[A-Za-z_][A-Za-z0-9_]{0,62}$/.test(form.dbName));
 
-// Derive a valid database name from the site name (mirrors
-// `bin/yerdd/src/create_site/wordpress.rs::derive_db_name` - the daemon is the
-// authority and re-validates whatever is submitted, but pre-filling with the
-// same rule avoids surprising the user with a rejected default): map hyphens
-// to underscores, prefix with a letter if the result still doesn't start with
-// one, then cap at 63 chars.
-function deriveDbName(siteName: string): string {
-  let name = siteName.replace(/-/g, "_");
-  if (!/^[A-Za-z_]/.test(name)) name = `wp_${name}`;
-  return name.slice(0, 63);
+/**
+ * A valid database name derived from the site name, mirroring
+ * `bin/yerdd/src/create_site/wordpress.rs::derive_db_name`. The daemon is the
+ * authority and re-validates, but pre-filling with the same rule avoids a
+ * rejected default: hyphens become underscores, a leading letter is added if
+ * needed, and the result is capped at 63 characters.
+ */
+function deriveDbName(name: string): string {
+  let db = name.replace(/-/g, "_");
+  if (!/^[A-Za-z_]/.test(db)) db = `wp_${db}`;
+  return db.slice(0, 63);
 }
 
 watch(
@@ -183,152 +145,64 @@ function randomPassword(): string {
   return Array.from(bytes, (b) => chars[b % chars.length]).join("");
 }
 
-function generatePassword(): void {
-  form.adminPassword = randomPassword();
-}
-
-// ── prerequisites ────────────────────────────────────────────────────────────
-const tools = ref<ToolStatus[]>([]);
-const toolsLoading = ref(false);
-const installingTool = ref<string | null>(null);
-const installingAll = ref(false);
-const installLog = ref<string[]>([]);
-const installLogBox = ref<HTMLElement | null>(null);
-
-async function appendInstallLog(lines: string[]): Promise<void> {
-  installLog.value.push(...lines);
-  await nextTick();
-  const el = installLogBox.value;
-  if (el) el.scrollTop = el.scrollHeight;
-}
-
-function toolAvailable(id: string): boolean {
-  return tools.value.some((t) => t.id === id && (t.installed || t.external));
-}
-// Managed-only: building WP-CLI requires Yerd's own Composer (an external
-// Composer can't build it) - same asymmetry as the Laravel installer. The
-// daemon never reports WP-CLI itself as `external`, since scaffolding execs
-// Yerd's own boot-fs.php rather than a PATH-resolved `wp`.
-const managedComposer = computed(() =>
-  tools.value.some((t) => t.id === "composer" && t.installed),
-);
-const needsWpCli = computed(() => !toolAvailable("wp-cli"));
-// Composer's only role here is building WP-CLI, so it's a prerequisite exactly
-// when WP-CLI still has to be built - scaffolding an installed WP-CLI never
-// shells out to Composer.
+const prereqs = reactive(useToolPrereqs(() => props.open));
+/** Building WP-CLI needs Yerd's own Composer, the same asymmetry as the Laravel
+ *  installer. The daemon never reports WP-CLI as `external`: scaffolding execs
+ *  Yerd's own boot-fs.php rather than a PATH-resolved `wp`. */
+const managedComposer = computed(() => prereqs.managed("composer"));
+const needsWpCli = computed(() => !prereqs.available("wp-cli"));
+/** Composer only builds WP-CLI here, so it's needed exactly while WP-CLI is. */
 const needsComposer = computed(() => needsWpCli.value && !managedComposer.value);
 const noPhp = computed(() => props.phpVersions.length === 0);
-
 const ready = computed(() => !noPhp.value && !needsComposer.value && !needsWpCli.value);
 
-interface PrereqRow {
-  id: "php" | "composer" | "wp-cli";
-  label: string;
-  sub: string;
-  ok: boolean;
+function installPhp(): Promise<boolean> {
+  return prereqs.installPhp(() => true, "No installable PHP versions were found.");
 }
 
-// Composer is listed only while it's actually required: its role here is
-// building WP-CLI, so once WP-CLI is installed it isn't a prerequisite and
-// showing it as "Installed" would claim something we haven't checked.
+/** Composer is listed only while WP-CLI still has to be built; once WP-CLI is
+ *  present, "Installed" would claim something that wasn't checked. */
 const prereqRows = computed<PrereqRow[]>(() => [
-  { id: "php", label: "PHP", sub: "Runtime", ok: !noPhp.value },
+  { id: "php", label: "PHP", sub: "Runtime", ok: !noPhp.value, install: installPhp },
   ...(needsWpCli.value
     ? [
         {
-          id: "composer" as const,
+          id: "composer",
           label: "Composer",
           sub: "Builds WP-CLI",
           ok: !needsComposer.value,
+          install: () => prereqs.installTool("composer"),
         },
       ]
     : []),
-  { id: "wp-cli", label: "WP-CLI", sub: "wp command", ok: !needsWpCli.value },
+  {
+    id: "wp-cli",
+    label: "WP-CLI",
+    sub: "wp command",
+    ok: !needsWpCli.value,
+    install: () => prereqs.installTool("wp-cli"),
+    blockedReason: managedComposer.value
+      ? undefined
+      : "Yerd's own Composer is required to build WP-CLI",
+  },
 ]);
-const installBusy = computed(() => installingAll.value || installingTool.value !== null);
-
-async function refreshTools(): Promise<void> {
-  toolsLoading.value = true;
-  try {
-    tools.value = await listTools();
-  } catch {
-    tools.value = [];
-  } finally {
-    toolsLoading.value = false;
-  }
-}
-
-async function installPrereq(id: "composer" | "wp-cli"): Promise<boolean> {
-  installingTool.value = id;
-  installLog.value = [];
-  try {
-    const jobId = await installToolStreamed(id);
-    const final = await pollJobToEnd(
-      jobId,
-      (lines) => void appendInstallLog(lines),
-      () => props.open,
-    );
-    await refreshTools();
-    if (final.state === "running") return false;
-    if (final.state !== "succeeded") {
-      toast.error(`Couldn't install ${id}`, final.error ?? "install failed");
-      return false;
-    }
-    return true;
-  } catch (e) {
-    toast.error(`Couldn't install ${id}`, (e as IpcError).message);
-    return false;
-  } finally {
-    installingTool.value = null;
-  }
-}
 
-async function installFirstPhp(): Promise<boolean> {
-  installingTool.value = "php";
-  installLog.value = [];
-  try {
-    const { available } = await availablePhp();
-    const version = available[available.length - 1];
-    if (!version) {
-      toast.error("Couldn't install PHP", "No installable PHP versions were found.");
-      return false;
-    }
-    void appendInstallLog([`Installing PHP ${version}…`]);
-    await installPhpWithProgress(version, (lines) => void appendInstallLog(lines));
-    await refresh();
-    void appendInstallLog([`Installed PHP ${version}`]);
+function installAll(): Promise<void> {
+  return prereqs.installAll(async () => {
+    if (noPhp.value && !(await installPhp())) return false;
+    if (needsComposer.value && !(await prereqs.installTool("composer"))) return false;
+    if (needsWpCli.value && !(await prereqs.installTool("wp-cli"))) return false;
     return true;
-  } catch (e) {
-    toast.error("Couldn't install PHP", (e as IpcError).message);
-    return false;
-  } finally {
-    installingTool.value = null;
-  }
-}
-
-async function installAllMissing(): Promise<void> {
-  installingAll.value = true;
-  try {
-    if (noPhp.value && !(await installFirstPhp())) return;
-    if (needsComposer.value && !(await installPrereq("composer"))) return;
-    if (needsWpCli.value && !(await installPrereq("wp-cli"))) return;
-    await nextTick();
-    toast.success("Toolchain ready");
-  } finally {
-    installingAll.value = false;
-  }
+  });
 }
 
-// ── database engine detection (informational only - provisioning happens
-// inline in the create job, see the Progress step's "Provisioning database"
-// phase) ─────────────────────────────────────────────────────────────────────
 const services = ref<ServiceStatus[]>([]);
 const servicesLoading = ref(false);
 let dbEngineTouched = false;
 
-/** Prefer a running engine over a merely-installed one (WP-P1-07: "Reuse a
- *  running SQL engine" - preselect whichever engine is actually available),
- *  `null` when neither MySQL nor MariaDB is installed (leaves the default). */
+/** Prefer a running MySQL/MariaDB over a merely installed one; `null` when
+ *  neither is installed, which leaves the default. Provisioning itself happens
+ *  inside the create job. */
 function preferredEngine(statuses: ServiceStatus[]): WordPressDbEngine | null {
   const candidates = statuses.filter(
     (s) => (s.service === "mysql" || s.service === "mariadb") && s.installed_versions.length > 0,
@@ -358,8 +232,22 @@ function selectDbEngine(engine: WordPressDbEngine): void {
   form.dbEngine = engine;
 }
 
-// ── WordPress core version (from meta/wordpress-versions.json in the yerd
-// repo, daemon-fetched and cached - see bin/yerdd/src/wordpress_versions.rs)
+const selectedEngineStatus = computed(() =>
+  services.value.find((s) => s.service === form.dbEngine),
+);
+const engineStateText = computed(() => {
+  const s = selectedEngineStatus.value;
+  if (!s) return "";
+  if (s.installed_versions.length === 0) {
+    return `No ${s.display_name} found - Yerd will install and start it as part of creating this site.`;
+  }
+  if (s.state !== "running") {
+    return `${s.display_name} is installed but not running - Yerd will start it as part of creating this site.`;
+  }
+  return `${s.display_name} is running and ready.`;
+});
+
+/** Core releases from the daemon-cached `meta/wordpress-versions.json` (see `wordpress_versions.rs`). */
 const wordpressVersions = ref<WordPressVersionInfo[]>([]);
 const wordpressVersionsLoading = ref(false);
 
@@ -380,10 +268,9 @@ const compatibleVersions = computed(() =>
     : wordpressVersions.value,
 );
 
-// The Select's value is the concrete latest patch (`wp core download
-// --version=` needs an exact release - a bare branch like "6.7" resolves to
-// that branch's original, unpatched release), labelled by its friendlier
-// branch name.
+/** Values are the concrete latest patch (`wp core download --version=` needs an
+ *  exact release; a bare branch resolves to its unpatched original), labelled
+ *  by the friendlier branch name. */
 const versionOptions = computed(() => [
   { value: "", label: "Latest" },
   ...compatibleVersions.value.map((v) => ({ value: v.latest, label: v.branch })),
@@ -398,21 +285,6 @@ watch(
   },
 );
 
-const selectedEngineStatus = computed(() =>
-  services.value.find((s) => s.service === form.dbEngine),
-);
-const engineStateText = computed(() => {
-  const s = selectedEngineStatus.value;
-  if (!s) return "";
-  if (s.installed_versions.length === 0) {
-    return `No ${s.display_name} found - Yerd will install and start it as part of creating this site.`;
-  }
-  if (s.state !== "running") {
-    return `${s.display_name} is installed but not running - Yerd will start it as part of creating this site.`;
-  }
-  return `${s.display_name} is running and ready.`;
-});
-
 function buildSpec(): CreateSiteSpec {
   const options: WordPressOptions = {
     core_version: form.coreVersion.trim() || null,
@@ -436,111 +308,7 @@ function buildSpec(): CreateSiteSpec {
   };
 }
 
-// ── progress / job polling ───────────────────────────────────────────────────
-const jobId = ref<string | null>(null);
-const jobStateRef = ref<JobState>("running");
-const phase = ref("Starting");
-const log = ref<string[]>([]);
-const jobError = ref<string | null>(null);
-const logBox = ref<HTMLElement | null>(null);
-let cursor = 0;
-let pollTimer: number | null = null;
-
-// Mirrors the exact `state.jobs.set_phase(id, "...")` strings emitted by
-// `bin/yerdd/src/create_site/wordpress.rs::run`, in order.
-const PHASES = [
-  "Preflight",
-  "Provisioning database",
-  "Downloading WordPress",
-  "Configuring",
-  "Installing",
-  "Registering",
-  "Done",
-];
-function phaseStatus(p: string): "done" | "active" | "todo" {
-  const cur = phase.value;
-  const ci = PHASES.indexOf(cur);
-  const pi = PHASES.indexOf(p);
-  if (jobStateRef.value === "succeeded") return "done";
-  if (ci === -1) return p === "Preflight" ? "active" : "todo";
-  if (pi < ci) return "done";
-  if (pi === ci) return "active";
-  return "todo";
-}
-
-async function chooseLocation(): Promise<void> {
-  const dir = await pickDirectory(form.location || undefined);
-  if (dir) form.location = dir;
-}
-
-async function startCreate(): Promise<void> {
-  step.value = 4;
-  jobStateRef.value = "running";
-  phase.value = "Starting";
-  log.value = [];
-  jobError.value = null;
-  cursor = 0;
-  try {
-    jobId.value = await createSite(buildSpec());
-    poll();
-  } catch (e) {
-    jobStateRef.value = "failed";
-    jobError.value = (e as IpcError).message;
-  }
-}
-
-function poll(): void {
-  if (!jobId.value) return;
-  void (async () => {
-    try {
-      const r = await jobStatus(jobId.value as string, cursor);
-      if (r.log.length) {
-        log.value.push(...r.log);
-        void scrollLog();
-      }
-      cursor = r.next_cursor;
-      phase.value = r.phase;
-      jobStateRef.value = r.state;
-      jobError.value = r.error;
-      if (r.state === "running" && props.open) {
-        pollTimer = window.setTimeout(poll, 600);
-      } else if (r.state === "succeeded") {
-        emit("created");
-      }
-    } catch (e) {
-      jobStateRef.value = "failed";
-      jobError.value = (e as IpcError).message;
-    }
-  })();
-}
-
-async function scrollLog(): Promise<void> {
-  await nextTick();
-  const el = logBox.value;
-  if (el) el.scrollTop = el.scrollHeight;
-}
-
-const cancelRequested = ref(false);
-async function cancelJob(): Promise<void> {
-  if (!jobId.value || cancelRequested.value) return;
-  cancelRequested.value = true;
-  try {
-    await jobCancel(jobId.value);
-  } catch {
-    /* the job may already be finishing; ignore */
-  }
-}
-
-function stopPolling(): void {
-  if (pollTimer !== null) {
-    window.clearTimeout(pollTimer);
-    pollTimer = null;
-  }
-}
-
-// ── lifecycle ────────────────────────────────────────────────────────────────
-function resetForm(): void {
-  step.value = 0;
+function reset(): void {
   form.name = "";
   form.location = props.parkedFolders[0] ?? "";
   form.php = props.defaultPhp || props.phpVersions[0] || "";
@@ -556,32 +324,12 @@ function resetForm(): void {
   form.dbName = "";
   dbNameTouched = false;
   dbEngineTouched = false;
-  jobId.value = null;
-  jobError.value = null;
-  log.value = [];
-  installLog.value = [];
-  jobStateRef.value = "running";
-  phase.value = "Starting";
-  cursor = 0;
-  installingTool.value = null;
-  installingAll.value = false;
-  cancelRequested.value = false;
+  prereqs.reset();
+  void prereqs.refresh();
+  void refreshServices();
+  void refreshWordpressVersions();
 }
 
-watch(
-  () => props.open,
-  (open) => {
-    if (open) {
-      resetForm();
-      void refreshTools();
-      void refreshServices();
-      void refreshWordpressVersions();
-    } else {
-      stopPolling();
-    }
-  },
-);
-
 watch(
   () => props.phpVersions,
   (versions) => {
@@ -590,445 +338,210 @@ watch(
     }
   },
 );
-
-onUnmounted(stopPolling);
-
-const busy = computed(() => jobStateRef.value === "running" && step.value === 4);
 </script>
 
 <template>
-  <Modal
+  <CreateSiteWizardShell
     :open="open"
     title="Create a new WordPress site"
-    size="lg"
+    :steps="['Basics', 'WordPress', 'Database', 'Review']"
+    :step-valid="[basicsValid, wordpressValid, dbNameValid, true]"
+    :build-spec="buildSpec"
+    :phases="PHASES"
+    :domain="domain"
+    :project-path="projectPath"
+    :open-url="openUrl"
+    :prereqs="prereqs"
+    :prereq-rows="prereqRows"
+    prereq-summary="Creating a WordPress site needs PHP and WP-CLI (which Yerd's own Composer builds)."
+    :ready="ready"
+    :install-all="installAll"
     @update:open="(v) => emit('update:open', v)"
+    @created="emit('created')"
+    @reset="reset"
   >
-    <div v-if="toolsLoading" class="flex items-center justify-center py-12">
-      <Spinner class="size-6" />
-    </div>
-
-    <!-- ── Prerequisites gate ── -->
-    <div v-else-if="!ready" class="space-y-4">
-      <div class="flex items-start gap-2 rounded-lg border border-warning/40 bg-warning/10 p-3">
-        <TriangleAlert class="mt-0.5 size-4 shrink-0 text-warning" />
-        <div>
-          <p class="text-sm font-medium">A few tools are needed first</p>
-          <p class="text-xs text-muted-foreground">
-            Creating a WordPress site needs PHP and WP-CLI (which Yerd's own Composer builds).
-            Install the missing ones to continue.
-          </p>
-        </div>
-      </div>
+    <template #step-0>
+      <SiteBasicsStep
+        v-model:name="form.name"
+        v-model:location="form.location"
+        v-model:php="form.php"
+        v-model:secure="form.secure"
+        id-prefix="wp-cs"
+        :parked-folders="parkedFolders"
+        :php-options="phpOptions"
+        :domain="domain"
+        :project-path="projectPath"
+        :name-valid="nameValid"
+        no-php-text="No PHP installed."
+      >
+        <template #php-hint>
+          <template v-if="phpIsLegacy">
+            Out of support: no dumps or coverage, and it can't be your default.
+          </template>
+          <template v-else>The version this site runs on.</template>
+        </template>
+      </SiteBasicsStep>
+    </template>
 
-      <div class="divide-y rounded-lg border">
-        <div
-          v-for="row in prereqRows"
-          :key="row.id"
-          class="flex items-center justify-between gap-3 px-3 py-2.5"
-        >
-          <div class="min-w-0">
-            <p class="text-sm font-medium">{{ row.label }}</p>
-            <p class="text-xs text-muted-foreground">{{ row.sub }}</p>
+    <template #step-1>
+      <div class="space-y-4">
+        <div class="flex gap-4">
+          <div class="flex-1">
+            <label class="text-sm font-medium" for="wp-cs-version">Core version</label>
+            <Select
+              id="wp-cs-version"
+              :model-value="form.coreVersion"
+              :options="versionOptions"
+              :disabled="wordpressVersionsLoading"
+              class="mt-2 w-full"
+              aria-label="Core version"
+              @update:model-value="(v: string) => (form.coreVersion = v)"
+            />
           </div>
-          <div class="flex shrink-0 items-center gap-2">
-            <span v-if="row.ok" class="flex items-center gap-1 text-xs text-success">
-              <CheckCircle2 class="size-4" /> Installed
-            </span>
-            <template v-else>
-              <Spinner v-if="installingTool === row.id" class="size-4" />
-              <Button
-                v-else
-                size="sm"
-                variant="outline"
-                :disabled="installBusy || (row.id === 'wp-cli' && !managedComposer)"
-                :title="row.id === 'wp-cli' && !managedComposer ? 'Yerd\'s own Composer is required to build WP-CLI' : ''"
-                @click="row.id === 'php' ? installFirstPhp() : installPrereq(row.id)"
-              >
-                Install
-              </Button>
-            </template>
+          <div class="flex-1">
+            <label class="text-sm font-medium" for="wp-cs-locale">Locale</label>
+            <Combobox
+              v-model="form.locale"
+              :options="WORDPRESS_LOCALES"
+              placeholder="en_US"
+              search-placeholder="Search locales…"
+              empty-text="No matching locale."
+              aria-label="Locale"
+              class="mt-2"
+            />
           </div>
         </div>
-      </div>
-
-      <pre
-        v-if="installLog.length"
-        ref="installLogBox"
-        class="h-40 overflow-y-auto whitespace-pre-wrap rounded-lg bg-zinc-950 p-3 font-mono text-[11px] leading-relaxed text-zinc-200"
-      >{{ installLog.join("\n") }}</pre>
-    </div>
-
-    <!-- ── Wizard ── -->
-    <template v-else>
-    <div v-if="step < 4" class="mb-6 flex w-full">
-      <div
-        v-for="(label, i) in STEP_LABELS"
-        :key="label"
-        class="step-chevron -ml-2.5 flex h-9 flex-1 items-center justify-center gap-1.5 pl-5 pr-1 text-xs font-medium transition-colors first:ml-0 first:pl-3"
-        :class="[
-          i < step
-            ? 'bg-brand/70 text-white'
-            : i === step
-              ? 'bg-brand text-white'
-              : 'bg-muted text-muted-foreground',
-          i !== step && i !== 0 ? 'step-chevron-sep' : '',
-        ]"
-      >
-        <Check v-if="i < step" class="size-3.5 shrink-0" />
-        <span>{{ label }}</span>
-      </div>
-    </div>
-
-    <!-- ── Step 1: Basics ── -->
-    <div v-if="step === 0" class="space-y-4">
-      <div>
-        <label class="text-sm font-medium" for="wp-cs-name">Project name</label>
-        <Input id="wp-cs-name" v-model="form.name" placeholder="e.g. blog" class="mt-2" />
-        <p class="mt-1 text-xs text-muted-foreground">
-          Served at
-          <span class="font-mono text-foreground">{{ domain }}</span>
-          <span v-if="projectPath"> · creates <span class="font-mono">{{ projectPath }}</span></span>
-        </p>
-        <p v-if="form.name && !nameValid" class="mt-1 text-xs text-destructive">
-          Use a single label: letters, numbers and hyphens only.
-        </p>
-      </div>
-
-      <div>
-        <label class="text-sm font-medium" for="wp-cs-location">Location</label>
-        <div class="mt-2 flex gap-2">
-          <Select
-            v-if="locationOptions.length"
-            id="wp-cs-location"
-            :model-value="form.location"
-            :options="locationOptions"
-            class="w-full"
-            aria-label="Location"
-            @update:model-value="(v: string) => (form.location = v)"
-          />
-          <Input v-else :model-value="form.location" readonly placeholder="Choose a folder…" />
-          <Button variant="outline" @click="chooseLocation">
-            <FolderOpen class="size-4" /> Browse
-          </Button>
-        </div>
-        <p class="mt-1 text-xs text-muted-foreground">
-          A parked folder serves the new site automatically; any other folder is linked.
-        </p>
-      </div>
-
-      <div class="flex items-center justify-between gap-4 rounded-lg border p-3">
-        <div>
-          <p class="text-sm font-medium">PHP version</p>
-          <p class="text-xs text-muted-foreground">
-            <template v-if="phpIsLegacy">
-              Out of support: no dumps or coverage, and it can't be your default.
-            </template>
-            <template v-else>The version this site runs on.</template>
-          </p>
-        </div>
-        <Select
-          v-if="phpOptions.length"
-          id="wp-cs-php"
-          :model-value="form.php"
-          :options="phpOptions"
-          class="w-40 shrink-0"
-          aria-label="PHP version"
-          @update:model-value="(v: string) => (form.php = v)"
-        />
-        <span v-else class="shrink-0 text-xs text-destructive">No PHP installed.</span>
-      </div>
 
-      <div class="flex items-center justify-between gap-4 rounded-lg border p-3">
         <div>
-          <p class="text-sm font-medium">HTTPS</p>
-          <p class="text-xs text-muted-foreground">Serve this site over TLS.</p>
-        </div>
-        <Switch v-model="form.secure" aria-label="Serve over HTTPS" />
-      </div>
-    </div>
-
-    <!-- ── Step 2: WordPress ── -->
-    <div v-else-if="step === 1" class="space-y-4">
-      <div class="flex gap-4">
-        <div class="flex-1">
-          <label class="text-sm font-medium" for="wp-cs-version">Core version</label>
-          <Select
-            id="wp-cs-version"
-            :model-value="form.coreVersion"
-            :options="versionOptions"
-            :disabled="wordpressVersionsLoading"
-            class="mt-2 w-full"
-            aria-label="Core version"
-            @update:model-value="(v: string) => (form.coreVersion = v)"
-          />
-        </div>
-        <div class="flex-1">
-          <label class="text-sm font-medium" for="wp-cs-locale">Locale</label>
-          <Combobox
-            v-model="form.locale"
-            :options="WORDPRESS_LOCALES"
-            placeholder="en_US"
-            search-placeholder="Search locales…"
-            empty-text="No matching locale."
-            aria-label="Locale"
-            class="mt-2"
-          />
-        </div>
-      </div>
-
-      <div>
-        <label class="text-sm font-medium" for="wp-cs-title">Site title</label>
-        <Input id="wp-cs-title" v-model="form.siteTitle" placeholder="My Blog" class="mt-2" />
-      </div>
-
-      <div class="flex gap-4">
-        <div class="flex-1">
-          <label class="text-sm font-medium" for="wp-cs-admin-user">Admin username</label>
-          <Input id="wp-cs-admin-user" v-model="form.adminUser" class="mt-2" />
-        </div>
-        <div class="flex-1">
-          <label class="text-sm font-medium" for="wp-cs-admin-email">Admin email</label>
-          <Input id="wp-cs-admin-email" v-model="form.adminEmail" type="email" class="mt-2" />
-          <p v-if="form.adminEmail && !emailValid" class="mt-1 text-xs text-destructive">
-            Enter a valid email address.
-          </p>
+          <label class="text-sm font-medium" for="wp-cs-title">Site title</label>
+          <Input id="wp-cs-title" v-model="form.siteTitle" placeholder="My Blog" class="mt-2" />
         </div>
-      </div>
 
-      <div>
-        <label class="text-sm font-medium" for="wp-cs-admin-password">Admin password</label>
-        <div class="mt-2 flex gap-2">
-          <Input
-            id="wp-cs-admin-password"
-            v-model="form.adminPassword"
-            type="text"
-            placeholder="At least 8 characters"
-            class="font-mono"
-          />
-          <Button variant="outline" @click="generatePassword">
-            <RefreshCw class="size-4" /> Generate
-          </Button>
-        </div>
-      </div>
-    </div>
-
-    <!-- ── Step 3: Database ── -->
-    <div v-else-if="step === 2" class="space-y-4">
-      <div>
-        <span class="text-sm font-medium">Database engine</span>
-        <div class="mt-2 grid grid-cols-2 gap-2">
-          <button
-            v-for="opt in [
-              { value: 'mysql', label: 'MySQL' },
-              { value: 'mariadb', label: 'MariaDB' },
-            ]"
-            :key="opt.value"
-            type="button"
-            class="rounded-lg border p-2.5 text-left transition-colors"
-            :class="
-              form.dbEngine === opt.value
-                ? 'border-brand bg-brand/5 ring-1 ring-brand'
-                : 'hover:border-brand/40'
-            "
-            @click="selectDbEngine(opt.value as WordPressDbEngine)"
-          >
-            <span class="block text-sm font-medium">{{ opt.label }}</span>
-          </button>
+        <div class="flex gap-4">
+          <div class="flex-1">
+            <label class="text-sm font-medium" for="wp-cs-admin-user">Admin username</label>
+            <Input id="wp-cs-admin-user" v-model="form.adminUser" class="mt-2" />
+          </div>
+          <div class="flex-1">
+            <label class="text-sm font-medium" for="wp-cs-admin-email">Admin email</label>
+            <Input id="wp-cs-admin-email" v-model="form.adminEmail" type="email" class="mt-2" />
+            <p v-if="form.adminEmail && !emailValid" class="mt-1 text-xs text-destructive">
+              Enter a valid email address.
+            </p>
+          </div>
         </div>
-      </div>
 
-      <div class="flex gap-4">
-        <div class="flex-1">
-          <label class="text-sm font-medium" for="wp-cs-dbname">Database name</label>
-          <Input
-            id="wp-cs-dbname"
-            v-model="form.dbName"
-            class="mt-2 font-mono"
-            @update:model-value="dbNameTouched = true"
-          />
-          <p v-if="form.dbName && !dbNameValid" class="mt-1 text-xs text-destructive">
-            Use letters, numbers and underscores, starting with a letter or underscore.
-          </p>
-        </div>
-        <div class="w-32 shrink-0">
-          <label class="text-sm font-medium" for="wp-cs-table-prefix">Table prefix</label>
-          <Input id="wp-cs-table-prefix" v-model="form.tablePrefix" class="mt-2 font-mono" />
+        <div>
+          <label class="text-sm font-medium" for="wp-cs-admin-password">Admin password</label>
+          <div class="mt-2 flex gap-2">
+            <Input
+              id="wp-cs-admin-password"
+              v-model="form.adminPassword"
+              type="text"
+              placeholder="At least 8 characters"
+              class="font-mono"
+            />
+            <Button variant="outline" @click="form.adminPassword = randomPassword()">
+              <RefreshCw class="size-4" /> Generate
+            </Button>
+          </div>
         </div>
       </div>
+    </template>
 
-      <div v-if="!servicesLoading && engineStateText" class="rounded-lg border bg-muted/30 p-3 text-xs text-muted-foreground">
-        {{ engineStateText }}
-      </div>
-      <p class="text-xs text-muted-foreground">
-        Only MySQL and MariaDB are supported for WordPress core. Yerd provisions the database as
-        part of creating this site.
-      </p>
-    </div>
-
-    <!-- ── Step 4: Review ── -->
-    <div v-else-if="step === 3" class="space-y-4">
-      <div class="rounded-lg border p-3 text-sm">
-        <dl class="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1.5">
-          <dt class="text-muted-foreground">Site</dt>
-          <dd class="font-mono">{{ domain }}</dd>
-          <dt class="text-muted-foreground">Path</dt>
-          <dd class="truncate font-mono">{{ projectPath }}</dd>
-          <dt class="text-muted-foreground">PHP</dt>
-          <dd>{{ form.php }}{{ form.secure ? " · HTTPS" : "" }}</dd>
-          <dt class="text-muted-foreground">WordPress</dt>
-          <dd>{{ form.coreVersion || "Latest" }} · {{ form.locale }}</dd>
-          <dt class="text-muted-foreground">Admin</dt>
-          <dd>{{ form.adminUser }} ({{ form.adminEmail }})</dd>
-          <dt class="text-muted-foreground">Database</dt>
-          <dd>{{ form.dbEngine }} · {{ form.dbName }}</dd>
-        </dl>
-      </div>
-      <p v-if="!wordpressValid" class="text-xs text-destructive">
-        Fill in the admin username, a valid email and a password of at least 8 characters on the
-        WordPress step before continuing.
-      </p>
-      <p v-else-if="!dbNameValid" class="text-xs text-destructive">
-        Fix the database name on the Database step before continuing.
-      </p>
-    </div>
-
-    <!-- ── Step 5: Progress ── -->
-    <div v-else class="space-y-4">
-      <div class="grid grid-cols-7">
-        <div v-for="(p, i) in PHASES" :key="p" class="flex flex-col items-center gap-1.5 px-0.5">
-          <div class="relative flex w-full items-center justify-center">
-            <span
-              v-if="i < PHASES.length - 1"
-              class="absolute left-1/2 top-1/2 z-0 h-0.5 w-full -translate-y-1/2 rounded-full transition-colors"
-              :class="phaseStatus(p) === 'done' ? 'bg-success' : 'bg-border'"
-            />
-            <span
-              class="relative z-10 flex size-6 shrink-0 items-center justify-center rounded-full transition-colors"
+    <template #step-2>
+      <div class="space-y-4">
+        <div>
+          <span class="text-sm font-medium">Database engine</span>
+          <div class="mt-2 grid grid-cols-2 gap-2">
+            <button
+              v-for="opt in [
+                { value: 'mysql', label: 'MySQL' },
+                { value: 'mariadb', label: 'MariaDB' },
+              ]"
+              :key="opt.value"
+              type="button"
+              class="rounded-lg border p-2.5 text-left transition-colors"
               :class="
-                phaseStatus(p) === 'done'
-                  ? 'bg-success text-white'
-                  : phaseStatus(p) === 'active'
-                    ? 'bg-brand text-white'
-                    : 'bg-muted text-muted-foreground'
+                form.dbEngine === opt.value
+                  ? 'border-brand bg-brand/5 ring-1 ring-brand'
+                  : 'hover:border-brand/40'
               "
+              @click="selectDbEngine(opt.value as WordPressDbEngine)"
             >
-              <Check v-if="phaseStatus(p) === 'done'" class="size-3.5" />
-              <Loader2 v-else-if="phaseStatus(p) === 'active'" class="size-3.5 animate-spin" />
-              <Circle v-else class="size-2 fill-current" />
-            </span>
+              <span class="block text-sm font-medium">{{ opt.label }}</span>
+            </button>
           </div>
-          <span
-            class="text-center text-[11px] leading-tight"
-            :class="phaseStatus(p) === 'todo' ? 'text-muted-foreground' : 'font-medium'"
-          >{{ p }}</span>
         </div>
-      </div>
-      <p v-if="phase && !PHASES.includes(phase) && jobStateRef === 'running'" class="text-xs text-muted-foreground">
-        {{ phase }}…
-      </p>
 
-      <pre
-        ref="logBox"
-        class="h-56 overflow-y-auto whitespace-pre-wrap rounded-lg bg-zinc-950 p-3 font-mono text-[11px] leading-relaxed text-zinc-200"
-      >{{ log.join("\n") || "Starting…" }}</pre>
+        <div class="flex gap-4">
+          <div class="flex-1">
+            <label class="text-sm font-medium" for="wp-cs-dbname">Database name</label>
+            <Input
+              id="wp-cs-dbname"
+              v-model="form.dbName"
+              class="mt-2 font-mono"
+              @update:model-value="dbNameTouched = true"
+            />
+            <p v-if="form.dbName && !dbNameValid" class="mt-1 text-xs text-destructive">
+              Use letters, numbers and underscores, starting with a letter or underscore.
+            </p>
+          </div>
+          <div class="w-32 shrink-0">
+            <label class="text-sm font-medium" for="wp-cs-table-prefix">Table prefix</label>
+            <Input id="wp-cs-table-prefix" v-model="form.tablePrefix" class="mt-2 font-mono" />
+          </div>
+        </div>
 
-      <div
-        v-if="jobStateRef === 'succeeded'"
-        class="flex items-center gap-2 rounded-lg border border-success/40 bg-success/10 p-3 text-sm text-success"
-      >
-        <CheckCircle2 class="size-4" /> {{ domain }} is ready.
-      </div>
-      <div
-        v-else-if="jobStateRef === 'failed'"
-        class="rounded-lg border border-destructive/40 bg-destructive/10 p-3 text-sm text-destructive"
-      >
-        {{ jobError || "Creation failed." }}
-      </div>
-      <div
-        v-else-if="jobStateRef === 'cancelled'"
-        class="rounded-lg border p-3 text-sm text-muted-foreground"
-      >
-        Cancelled.
+        <div
+          v-if="!servicesLoading && engineStateText"
+          class="rounded-lg border bg-muted/30 p-3 text-xs text-muted-foreground"
+        >
+          {{ engineStateText }}
+        </div>
+        <p class="text-xs text-muted-foreground">
+          Only MySQL and MariaDB are supported for WordPress core. Yerd provisions the database as
+          part of creating this site.
+        </p>
       </div>
-    </div>
     </template>
 
-    <template #footer="{ close: modalClose }">
-      <template v-if="toolsLoading">
-        <Button variant="ghost" @click="modalClose">Cancel</Button>
-      </template>
-
-      <template v-else-if="!ready">
-        <Button variant="ghost" @click="modalClose">Cancel</Button>
-        <Button :disabled="installBusy" @click="installAllMissing">
-          <Spinner v-if="installingAll" class="size-4" /> Install missing tools
-        </Button>
-      </template>
-
-      <template v-else-if="step === 4">
-        <template v-if="busy">
-          <Button variant="ghost" :disabled="cancelRequested" @click="cancelJob">
-            {{ cancelRequested ? "Cancelling…" : "Cancel" }}
-          </Button>
-        </template>
-        <template v-else-if="jobStateRef === 'succeeded'">
-          <Button variant="outline" @click="openPath(projectPath)">
-            <FolderOpen class="size-4" /> Open folder
-          </Button>
-          <Button
-            variant="outline"
-            title="Signs you in as the site's admin when possible"
-            @click="openWpAdmin"
-          >
-            <ExternalLink class="size-4" /> WP Admin
-          </Button>
-          <Button variant="outline" @click="openInBrowser(openUrl)">
-            <ExternalLink class="size-4" /> Open in browser
-          </Button>
-          <Button @click="modalClose">Done</Button>
-        </template>
-        <template v-else>
-          <Button variant="ghost" @click="step = 3">
-            <ChevronLeft class="size-4" /> Back
-          </Button>
-          <Button @click="modalClose">Close</Button>
-        </template>
-      </template>
-
-      <template v-else>
-        <Button v-if="step > 0" variant="ghost" @click="step = (step - 1) as Step">
-          <ChevronLeft class="size-4" /> Back
-        </Button>
-        <Button v-else variant="ghost" @click="modalClose">Cancel</Button>
+    <template #step-3>
+      <div class="space-y-4">
+        <div class="rounded-lg border p-3 text-sm">
+          <dl class="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1.5">
+            <dt class="text-muted-foreground">Site</dt>
+            <dd class="font-mono">{{ domain }}</dd>
+            <dt class="text-muted-foreground">Path</dt>
+            <dd class="truncate font-mono">{{ projectPath }}</dd>
+            <dt class="text-muted-foreground">PHP</dt>
+            <dd>{{ form.php }}{{ form.secure ? " · HTTPS" : "" }}</dd>
+            <dt class="text-muted-foreground">WordPress</dt>
+            <dd>{{ form.coreVersion || "Latest" }} · {{ form.locale }}</dd>
+            <dt class="text-muted-foreground">Admin</dt>
+            <dd>{{ form.adminUser }} ({{ form.adminEmail }})</dd>
+            <dt class="text-muted-foreground">Database</dt>
+            <dd>{{ form.dbEngine }} · {{ form.dbName }}</dd>
+          </dl>
+        </div>
+        <p v-if="!wordpressValid" class="text-xs text-destructive">
+          Fill in the admin username, a valid email and a password of at least 8 characters on the
+          WordPress step before continuing.
+        </p>
+        <p v-else-if="!dbNameValid" class="text-xs text-destructive">
+          Fix the database name on the Database step before continuing.
+        </p>
+      </div>
+    </template>
 
-        <Button v-if="step === 0" :disabled="!basicsValid" @click="step = 1">Next</Button>
-        <Button v-else-if="step === 1" :disabled="!wordpressValid" @click="step = 2">Next</Button>
-        <Button v-else-if="step === 2" :disabled="!dbNameValid" @click="step = 3">Next</Button>
-        <Button v-else :disabled="!ready" @click="startCreate">Create site</Button>
-      </template>
+    <template #success-actions>
+      <Button
+        variant="outline"
+        title="Signs you in as the site's admin when possible"
+        @click="openWpAdmin"
+      >
+        <ExternalLink class="size-4" /> WP Admin
+      </Button>
     </template>
-  </Modal>
+  </CreateSiteWizardShell>
 </template>
-
-<style scoped>
-/* Chevron/arrow breadcrumb - identical to CreateLaravelWizard.vue's. */
-.step-chevron {
-  clip-path: polygon(
-    0 0,
-    calc(100% - 10px) 0,
-    100% 50%,
-    calc(100% - 10px) 100%,
-    0 100%,
-    10px 50%
-  );
-}
-.step-chevron:first-child {
-  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
-}
-.step-chevron:last-child {
-  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10px 50%);
-}
-.step-chevron-sep {
-  filter: drop-shadow(-2.5px 0 0 #a1a1aa);
-}
-</style>
diff --git a/apps/yerd-gui/src/components/site-create/SiteBasicsStep.vue b/apps/yerd-gui/src/components/site-create/SiteBasicsStep.vue
new file mode 100644
index 00000000..038d8084
--- /dev/null
+++ b/apps/yerd-gui/src/components/site-create/SiteBasicsStep.vue
@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { FolderOpen } from "lucide-vue-next";
+
+import Button from "@/components/ui/Button.vue";
+import Input from "@/components/ui/Input.vue";
+import Select from "@/components/ui/Select.vue";
+import Switch from "@/components/ui/Switch.vue";
+import { pickDirectory } from "@/ipc/client";
+
+const props = defineProps<{
+  /** Prefix for the field ids (`${idPrefix}-name`, `-location`, `-php`). */
+  idPrefix: string;
+  parkedFolders: string[];
+  phpOptions: { value: string; label: string }[];
+  domain: string;
+  projectPath: string;
+  nameValid: boolean;
+  /** Shown in place of the PHP picker when no usable version is installed. */
+  noPhpText: string;
+}>();
+
+const name = defineModel<string>("name", { required: true });
+const location = defineModel<string>("location", { required: true });
+const php = defineModel<string>("php", { required: true });
+const secure = defineModel<boolean>("secure", { required: true });
+
+/** Parked roots, plus a custom-picked folder that isn't one of them. */
+const locationOptions = computed(() => {
+  const opts = props.parkedFolders.map((f) => ({ value: f, label: `${f}  (parked)` }));
+  if (location.value && !props.parkedFolders.includes(location.value)) {
+    opts.unshift({ value: location.value, label: location.value });
+  }
+  return opts;
+});
+
+async function chooseLocation(): Promise<void> {
+  const dir = await pickDirectory(location.value || undefined);
+  if (dir) location.value = dir;
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <div>
+      <label class="text-sm font-medium" :for="`${idPrefix}-name`">Project name</label>
+      <Input :id="`${idPrefix}-name`" v-model="name" placeholder="e.g. blog" class="mt-2" />
+      <p class="mt-1 text-xs text-muted-foreground">
+        Served at
+        <span class="font-mono text-foreground">{{ domain }}</span>
+        <span v-if="projectPath"> · creates <span class="font-mono">{{ projectPath }}</span></span>
+      </p>
+      <p v-if="name && !nameValid" class="mt-1 text-xs text-destructive">
+        Use a single label: letters, numbers and hyphens only.
+      </p>
+    </div>
+
+    <div>
+      <label class="text-sm font-medium" :for="`${idPrefix}-location`">Location</label>
+      <div class="mt-2 flex gap-2">
+        <Select
+          v-if="locationOptions.length"
+          :id="`${idPrefix}-location`"
+          :model-value="location"
+          :options="locationOptions"
+          class="w-full"
+          aria-label="Location"
+          @update:model-value="(v: string) => (location = v)"
+        />
+        <Input v-else :model-value="location" readonly placeholder="Choose a folder…" />
+        <Button variant="outline" @click="chooseLocation">
+          <FolderOpen class="size-4" /> Browse
+        </Button>
+      </div>
+      <p class="mt-1 text-xs text-muted-foreground">
+        A parked folder serves the new site automatically; any other folder is linked.
+      </p>
+    </div>
+
+    <div class="flex items-center justify-between gap-4 rounded-lg border p-3">
+      <div>
+        <p class="text-sm font-medium">PHP version</p>
+        <p class="text-xs text-muted-foreground">
+          <slot name="php-hint">The version this site runs on.</slot>
+        </p>
+      </div>
+      <Select
+        v-if="phpOptions.length"
+        :id="`${idPrefix}-php`"
+        :model-value="php"
+        :options="phpOptions"
+        class="w-40 shrink-0"
+        aria-label="PHP version"
+        @update:model-value="(v: string) => (php = v)"
+      />
+      <span v-else class="shrink-0 text-xs text-destructive">{{ noPhpText }}</span>
+    </div>
+
+    <div class="flex items-center justify-between gap-4 rounded-lg border p-3">
+      <div>
+        <p class="text-sm font-medium">HTTPS</p>
+        <p class="text-xs text-muted-foreground">Serve this site over TLS.</p>
+      </div>
+      <Switch v-model="secure" aria-label="Serve over HTTPS" />
+    </div>
+  </div>
+</template>
diff --git a/apps/yerd-gui/src/composables/useCreateSiteJob.test.ts b/apps/yerd-gui/src/composables/useCreateSiteJob.test.ts
new file mode 100644
index 00000000..749e6d69
--- /dev/null
+++ b/apps/yerd-gui/src/composables/useCreateSiteJob.test.ts
@@ -0,0 +1,23 @@
+import { describe, expect, it } from "vitest";
+
+import { phaseStatus } from "./useCreateSiteJob";
+import type { JobState } from "@/ipc/types";
+
+const PHASES = ["Preflight", "Scaffolding", "Registering", "Done"];
+
+describe("phaseStatus", () => {
+  it.each<[string, JobState, string, string]>([
+    ["Scaffolding", "running", "Preflight", "done"],
+    ["Scaffolding", "running", "Scaffolding", "active"],
+    ["Scaffolding", "running", "Registering", "todo"],
+    ["Registering", "succeeded", "Done", "done"],
+    ["Starting", "running", "Preflight", "active"],
+    ["Installing Node", "running", "Scaffolding", "todo"],
+    ["Scaffolding", "failed", "Preflight", "done"],
+    ["Scaffolding", "failed", "Scaffolding", "todo"],
+    ["Scaffolding", "cancelled", "Scaffolding", "todo"],
+    ["Starting", "failed", "Preflight", "todo"],
+  ])("phase %s while %s marks %s as %s", (current, state, p, expected) => {
+    expect(phaseStatus(PHASES, current, state, p)).toBe(expected);
+  });
+});
diff --git a/apps/yerd-gui/src/composables/useCreateSiteJob.ts b/apps/yerd-gui/src/composables/useCreateSiteJob.ts
new file mode 100644
index 00000000..48d3e417
--- /dev/null
+++ b/apps/yerd-gui/src/composables/useCreateSiteJob.ts
@@ -0,0 +1,143 @@
+import { computed, onUnmounted, ref } from "vue";
+
+import { useToast } from "@/composables/useToast";
+import { createSite, IpcError, jobCancel, jobStatus } from "@/ipc/client";
+import type { CreateSiteSpec, JobState } from "@/ipc/types";
+
+export type PhaseStatus = "done" | "active" | "todo";
+
+/**
+ * Where phase `p` stands in a create job's stepper. A phase the daemon reports
+ * outside `phases` (e.g. "Installing Node") keeps the first phase active, and
+ * nothing spins once the job has failed or been cancelled.
+ */
+export function phaseStatus(
+  phases: readonly string[],
+  current: string,
+  state: JobState,
+  p: string,
+): PhaseStatus {
+  if (state === "succeeded") return "done";
+  const running = state === "running";
+  const ci = phases.indexOf(current);
+  const pi = phases.indexOf(p);
+  if (ci === -1) return pi === 0 && running ? "active" : "todo";
+  if (pi < ci) return "done";
+  if (pi === ci && running) return "active";
+  return "todo";
+}
+
+export interface CreateSiteJobOptions {
+  isOpen: () => boolean;
+  domain: () => string;
+  onCreated: () => void;
+}
+
+/**
+ * A site-create job: start it, poll its progress and log, cancel it. Polling
+ * carries on while the wizard is closed so the site list still refreshes when
+ * the job lands, and a job that finishes unseen is announced with a toast. It
+ * stops for good once the owning component unmounts.
+ */
+export function useCreateSiteJob(opts: CreateSiteJobOptions) {
+  const toast = useToast();
+
+  const state = ref<JobState>("running");
+  const phase = ref("Starting");
+  const log = ref<string[]>([]);
+  const error = ref<string | null>(null);
+  const cancelRequested = ref(false);
+  const started = ref(false);
+  const jobId = ref<string | null>(null);
+  let cursor = 0;
+  let pollTimer: number | null = null;
+  let unmounted = false;
+  let generation = 0;
+
+  /** True from `start()` until the job ends, including before the daemon returns its id. */
+  const inFlight = computed(() => started.value && state.value === "running");
+
+  function stop(): void {
+    if (pollTimer !== null) {
+      window.clearTimeout(pollTimer);
+      pollTimer = null;
+    }
+  }
+
+  function reset(): void {
+    stop();
+    generation += 1;
+    started.value = false;
+    jobId.value = null;
+    cursor = 0;
+    state.value = "running";
+    phase.value = "Starting";
+    log.value = [];
+    error.value = null;
+    cancelRequested.value = false;
+  }
+
+  function announceUnseen(final: JobState, message: string | null): void {
+    if (final === "succeeded") toast.success(`${opts.domain()} is ready`);
+    else if (final === "failed") {
+      toast.error(`Couldn't create ${opts.domain()}`, message ?? "creation failed");
+    }
+  }
+
+  function poll(): void {
+    const id = jobId.value;
+    if (!id) return;
+    void (async () => {
+      try {
+        const r = await jobStatus(id, cursor);
+        if (jobId.value !== id) return;
+        log.value.push(...r.log);
+        cursor = r.next_cursor;
+        phase.value = r.phase;
+        state.value = r.state;
+        error.value = r.error;
+        if (r.state === "running") {
+          if (!unmounted) pollTimer = window.setTimeout(poll, 600);
+          return;
+        }
+        if (r.state === "succeeded") opts.onCreated();
+        if (!opts.isOpen()) announceUnseen(r.state, r.error);
+      } catch (e) {
+        if (jobId.value !== id) return;
+        state.value = "failed";
+        error.value = (e as IpcError).message;
+        if (!opts.isOpen()) announceUnseen("failed", error.value);
+      }
+    })();
+  }
+
+  async function start(spec: CreateSiteSpec): Promise<void> {
+    reset();
+    const gen = generation;
+    started.value = true;
+    try {
+      const id = await createSite(spec);
+      if (gen !== generation || unmounted) return;
+      jobId.value = id;
+      poll();
+    } catch (e) {
+      if (gen !== generation) return;
+      state.value = "failed";
+      error.value = (e as IpcError).message;
+      if (!opts.isOpen()) announceUnseen("failed", error.value);
+    }
+  }
+
+  async function cancel(): Promise<void> {
+    if (!jobId.value || cancelRequested.value) return;
+    cancelRequested.value = true;
+    await jobCancel(jobId.value).catch(() => undefined);
+  }
+
+  onUnmounted(() => {
+    unmounted = true;
+    stop();
+  });
+
+  return { state, phase, log, error, cancelRequested, inFlight, start, cancel, reset, stop };
+}
diff --git a/apps/yerd-gui/src/composables/useSiteBasics.test.ts b/apps/yerd-gui/src/composables/useSiteBasics.test.ts
new file mode 100644
index 00000000..b015aaee
--- /dev/null
+++ b/apps/yerd-gui/src/composables/useSiteBasics.test.ts
@@ -0,0 +1,31 @@
+import { describe, expect, it } from "vitest";
+import { reactive } from "vue";
+
+import { useSiteBasics } from "./useSiteBasics";
+
+function basics(name: string) {
+  const form = reactive({ name, location: "/srv", php: "8.4", secure: false });
+  return useSiteBasics(form, { tld: "test", report: null });
+}
+
+describe("useSiteBasics", () => {
+  it.each([
+    ["blog", true],
+    ["My-Blog", true],
+    ["  blog  ", true],
+    ["-blog", false],
+    ["blog-", false],
+    ["my_blog", false],
+    ["a".repeat(64), false],
+    ["Kelvin", false],
+  ])("validates %j as %s", (name, expected) => {
+    expect(basics(name).nameValid.value).toBe(expected);
+  });
+
+  it("derives the lowercased domain and folder the daemon creates", () => {
+    const b = basics(" My-Blog ");
+    expect(b.domain.value).toBe("my-blog.test");
+    expect(b.projectPath.value).toBe("/srv/my-blog");
+    expect(b.basicsValid.value).toBe(true);
+  });
+});
diff --git a/apps/yerd-gui/src/composables/useSiteBasics.ts b/apps/yerd-gui/src/composables/useSiteBasics.ts
new file mode 100644
index 00000000..a0c02214
--- /dev/null
+++ b/apps/yerd-gui/src/composables/useSiteBasics.ts
@@ -0,0 +1,37 @@
+import { computed } from "vue";
+
+import { siteUrl } from "@/lib/siteUrl";
+import type { StatusReport } from "@/ipc/types";
+
+export interface SiteBasicsForm {
+  name: string;
+  location: string;
+  php: string;
+  secure: boolean;
+}
+
+/**
+ * The derived values every create wizard shows for its Basics step. The daemon
+ * lowercases the site name and creates the project folder from it, so the
+ * domain, path and browser URL all use the lowercased name. `nameValid` mirrors
+ * `validate_and_lowercase_name` in `yerd-core` and checks the name as typed:
+ * lowercasing first would let Unicode such as the Kelvin sign fold into ASCII.
+ */
+export function useSiteBasics(
+  form: SiteBasicsForm,
+  props: { tld: string; report: StatusReport | null },
+) {
+  const siteName = computed(() => form.name.trim().toLowerCase());
+  const nameValid = computed(() =>
+    /^[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?$/i.test(form.name.trim()),
+  );
+  const projectPath = computed(() => (form.location ? `${form.location}/${siteName.value}` : ""));
+  const domain = computed(() => `${siteName.value || "name"}.${props.tld}`);
+  const openUrl = computed(() =>
+    siteUrl({ name: siteName.value || "name", secure: form.secure }, props.report),
+  );
+  const basicsValid = computed(
+    () => nameValid.value && form.location.trim() !== "" && form.php !== "",
+  );
+  return { siteName, nameValid, projectPath, domain, openUrl, basicsValid };
+}
diff --git a/apps/yerd-gui/src/composables/useToolPrereqs.test.ts b/apps/yerd-gui/src/composables/useToolPrereqs.test.ts
new file mode 100644
index 00000000..c2de726b
--- /dev/null
+++ b/apps/yerd-gui/src/composables/useToolPrereqs.test.ts
@@ -0,0 +1,119 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const listTools = vi.hoisted(() => vi.fn());
+const availablePhp = vi.hoisted(() => vi.fn());
+const installPhpWithProgress = vi.hoisted(() => vi.fn());
+const installToolStreamed = vi.hoisted(() => vi.fn());
+const pollJobToEnd = vi.hoisted(() => vi.fn());
+const refreshDaemon = vi.hoisted(() => vi.fn());
+const toastSuccess = vi.hoisted(() => vi.fn());
+const toastError = vi.hoisted(() => vi.fn());
+
+vi.mock("@/ipc/client", () => ({
+  IpcError: class IpcError extends Error {},
+  availablePhp,
+  installPhpWithProgress,
+  installToolStreamed,
+  listTools,
+  pollJobToEnd,
+}));
+vi.mock("@/composables/useDaemon", () => ({
+  useDaemon: () => ({ refresh: refreshDaemon }),
+}));
+vi.mock("@/composables/useToast", () => ({
+  useToast: () => ({ success: toastSuccess, error: toastError }),
+}));
+
+import { useToolPrereqs } from "./useToolPrereqs";
+import type { ToolStatus } from "@/ipc/types";
+
+function tool(id: string, overrides: Partial<ToolStatus> = {}): ToolStatus {
+  return { id, display_name: id, installed: true, version: "1.0", binaries: [id], ...overrides };
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  listTools.mockResolvedValue([]);
+  installToolStreamed.mockResolvedValue("job-1");
+});
+
+describe("useToolPrereqs", () => {
+  it("tells managed tools apart from ones found on PATH", async () => {
+    listTools.mockResolvedValue([
+      tool("composer", { installed: false, external: true }),
+      tool("wp-cli"),
+    ]);
+    const p = useToolPrereqs(() => true);
+    await p.refresh();
+
+    expect(p.available("composer")).toBe(true);
+    expect(p.managed("composer")).toBe(false);
+    expect(p.managed("wp-cli")).toBe(true);
+    expect(p.available("laravel")).toBe(false);
+  });
+
+  it("treats a failed tool listing as nothing installed", async () => {
+    listTools.mockRejectedValue(new Error("daemon down"));
+    const p = useToolPrereqs(() => true);
+    await p.refresh();
+    expect(p.tools.value).toEqual([]);
+    expect(p.loading.value).toBe(false);
+  });
+
+  it.each([
+    ["succeeded", null, true, false],
+    ["failed", "no network", false, true],
+    ["running", null, false, false],
+  ] as const)(
+    "installTool reports a %s install",
+    async (state, error, expected, toasted) => {
+      pollJobToEnd.mockImplementation(async (_id, onLines: (l: string[]) => void) => {
+        onLines(["fetching"]);
+        return { state, error };
+      });
+      const p = useToolPrereqs(() => true);
+
+      await expect(p.installTool("composer")).resolves.toBe(expected);
+      expect(p.installLog.value).toEqual(["fetching"]);
+      expect(p.installingTool.value).toBeNull();
+      expect(listTools).toHaveBeenCalled();
+      expect(toastError.mock.calls.length > 0).toBe(toasted);
+    },
+  );
+
+  it("installs the newest PHP the wizard accepts", async () => {
+    availablePhp.mockResolvedValue({ available: ["8.1", "8.3", "8.4", "8.6"] });
+    const p = useToolPrereqs(() => true);
+
+    await expect(p.installPhp((v) => v !== "8.6", "none")).resolves.toBe(true);
+    expect(installPhpWithProgress).toHaveBeenCalledWith("8.4", expect.any(Function));
+    expect(refreshDaemon).toHaveBeenCalled();
+    expect(p.installLog.value).toEqual(["Installing PHP 8.4…", "Installed PHP 8.4"]);
+  });
+
+  it("explains when no installable PHP is accepted", async () => {
+    availablePhp.mockResolvedValue({ available: ["7.4"] });
+    const p = useToolPrereqs(() => true);
+
+    await expect(p.installPhp(() => false, "Nothing suitable.")).resolves.toBe(false);
+    expect(toastError).toHaveBeenCalledWith("Couldn't install PHP", "Nothing suitable.");
+    expect(installPhpWithProgress).not.toHaveBeenCalled();
+  });
+
+  it.each([
+    [true, 1],
+    [false, 0],
+  ])("installAll announces the toolchain only when the run succeeds (%s)", async (ok, toasts) => {
+    const p = useToolPrereqs(() => true);
+    let busyDuringRun = false;
+
+    await p.installAll(async () => {
+      busyDuringRun = p.busy.value;
+      return ok;
+    });
+
+    expect(busyDuringRun).toBe(true);
+    expect(p.installingAll.value).toBe(false);
+    expect(toastSuccess).toHaveBeenCalledTimes(toasts);
+  });
+});
diff --git a/apps/yerd-gui/src/composables/useToolPrereqs.ts b/apps/yerd-gui/src/composables/useToolPrereqs.ts
new file mode 100644
index 00000000..99ccf235
--- /dev/null
+++ b/apps/yerd-gui/src/composables/useToolPrereqs.ts
@@ -0,0 +1,161 @@
+import { computed, nextTick, ref, type UnwrapNestedRefs } from "vue";
+
+import { useDaemon } from "@/composables/useDaemon";
+import { useToast } from "@/composables/useToast";
+import {
+  availablePhp,
+  installPhpWithProgress,
+  installToolStreamed,
+  IpcError,
+  listTools,
+  pollJobToEnd,
+} from "@/ipc/client";
+import type { ToolStatus } from "@/ipc/types";
+
+/** One row of a create wizard's prerequisites gate. */
+export interface PrereqRow {
+  id: string;
+  label: string;
+  sub: string;
+  ok: boolean;
+  install: () => Promise<boolean>;
+  /** Set when the row can't be installed yet; disables Install and becomes its tooltip. */
+  blockedReason?: string;
+}
+
+/**
+ * The toolchain a create wizard needs before it unlocks: which tools are
+ * present, plus streamed installs of the missing ones. `isOpen` stops an
+ * install's progress poll once the wizard closes (the install itself carries on
+ * in the daemon).
+ */
+export function useToolPrereqs(isOpen: () => boolean) {
+  const toast = useToast();
+  const { refresh: refreshDaemon } = useDaemon();
+
+  const tools = ref<ToolStatus[]>([]);
+  const loading = ref(false);
+  const installingTool = ref<string | null>(null);
+  const installingAll = ref(false);
+  const installLog = ref<string[]>([]);
+  const busy = computed(() => installingAll.value || installingTool.value !== null);
+
+  /** Yerd-managed or found on the user's PATH: either can run the scaffold. */
+  function available(id: string): boolean {
+    return tools.value.some((t) => t.id === id && (t.installed || t.external));
+  }
+
+  /** Yerd-managed only, e.g. the Composer that builds the Laravel installer and WP-CLI. */
+  function managed(id: string): boolean {
+    return tools.value.some((t) => t.id === id && t.installed);
+  }
+
+  async function refresh(): Promise<void> {
+    loading.value = true;
+    try {
+      tools.value = await listTools();
+    } catch {
+      tools.value = [];
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  function appendLog(lines: string[]): void {
+    installLog.value.push(...lines);
+  }
+
+  /**
+   * Install a managed tool, streaming its output into the install log. A job
+   * still `running` when the poll returns means the wizard closed, not a failure.
+   */
+  async function installTool(id: string): Promise<boolean> {
+    installingTool.value = id;
+    installLog.value = [];
+    try {
+      const jobId = await installToolStreamed(id);
+      const final = await pollJobToEnd(jobId, appendLog, isOpen);
+      await refresh();
+      if (final.state === "running") return false;
+      if (final.state !== "succeeded") {
+        toast.error(`Couldn't install ${id}`, final.error ?? "install failed");
+        return false;
+      }
+      return true;
+    } catch (e) {
+      toast.error(`Couldn't install ${id}`, (e as IpcError).message);
+      return false;
+    } finally {
+      installingTool.value = null;
+    }
+  }
+
+  /**
+   * Install the newest installable PHP that `accept` allows (the distribution
+   * lists them ascending), rather than pinning a version that rots each release.
+   */
+  async function installPhp(accept: (v: string) => boolean, noneMessage: string): Promise<boolean> {
+    installingTool.value = "php";
+    installLog.value = [];
+    try {
+      const { available: versions } = await availablePhp();
+      const accepted = versions.filter(accept);
+      const version = accepted[accepted.length - 1];
+      if (!version) {
+        toast.error("Couldn't install PHP", noneMessage);
+        return false;
+      }
+      appendLog([`Installing PHP ${version}…`]);
+      await installPhpWithProgress(version, appendLog);
+      await refreshDaemon();
+      appendLog([`Installed PHP ${version}`]);
+      return true;
+    } catch (e) {
+      toast.error("Couldn't install PHP", (e as IpcError).message);
+      return false;
+    } finally {
+      installingTool.value = null;
+    }
+  }
+
+  /**
+   * Run a wizard's install-everything sequence. "Toolchain ready" is announced
+   * whenever `run` reports success rather than gated on the wizard unlocking,
+   * since a freshly installed PHP reaches the wizard's props asynchronously.
+   */
+  async function installAll(run: () => Promise<boolean>): Promise<void> {
+    installingAll.value = true;
+    try {
+      if (!(await run())) return;
+      await nextTick();
+      toast.success("Toolchain ready");
+    } finally {
+      installingAll.value = false;
+    }
+  }
+
+  function reset(): void {
+    installLog.value = [];
+    installingTool.value = null;
+    installingAll.value = false;
+  }
+
+  return {
+    tools,
+    loading,
+    installingTool,
+    installingAll,
+    installLog,
+    busy,
+    available,
+    managed,
+    refresh,
+    installTool,
+    installPhp,
+    installAll,
+    reset,
+  };
+}
+
+/** `useToolPrereqs` as a wizard holds it (wrapped in `reactive`) and hands it to the shell. */
+export type ToolPrereqs = UnwrapNestedRefs<ReturnType<typeof useToolPrereqs>>;
diff --git a/apps/yerd-gui/src/ipc/types.ts b/apps/yerd-gui/src/ipc/types.ts
index 78f50c35..4dd3787c 100644
--- a/apps/yerd-gui/src/ipc/types.ts
+++ b/apps/yerd-gui/src/ipc/types.ts
@@ -462,7 +462,11 @@ export interface WordPressOptions {
  */
 export type Framework =
   | { framework: "laravel"; options: LaravelOptions }
-  | { framework: "wordpress"; options: WordPressOptions };
+  | { framework: "wordpress"; options: WordPressOptions }
+  | { framework: ComposerFramework };
+
+/** Frameworks scaffolded with `composer create-project`, which take no options. */
+export type ComposerFramework = "codeigniter" | "cakephp" | "slim";
 
 /** crates/yerd-ipc/src/create.rs - CreateSiteSpec. */
 export interface CreateSiteSpec {
diff --git a/apps/yerd-gui/src/views/SitesView.vue b/apps/yerd-gui/src/views/SitesView.vue
index 82833b2e..20ca7618 100644
--- a/apps/yerd-gui/src/views/SitesView.vue
+++ b/apps/yerd-gui/src/views/SitesView.vue
@@ -3,8 +3,11 @@ import { computed, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
 import {
   ArrowDown,
   ArrowUp,
+  CakeSlice,
   ChevronDown,
   ChevronRight,
+  Feather,
+  Flame,
   FolderMinus,
   FolderOpen,
   FolderPlus,
@@ -22,6 +25,7 @@ import {
 
 import CreateLaravelWizard from "@/components/site-create/CreateLaravelWizard.vue";
 import CreateWordPressWizard from "@/components/site-create/CreateWordPressWizard.vue";
+import CreateComposerSiteWizard from "@/components/site-create/CreateComposerSiteWizard.vue";
 import SiteCard from "@/components/SiteCard.vue";
 import SiteDetailsSidebar from "@/components/SiteDetailsSidebar.vue";
 import PageHeader from "@/components/PageHeader.vue";
@@ -69,7 +73,7 @@ import {
   unlink,
   unpark,
 } from "@/ipc/client";
-import type { GroupsState, Site, SiteEntry } from "@/ipc/types";
+import type { ComposerFramework, GroupsState, Site, SiteEntry } from "@/ipc/types";
 
 const toast = useToast();
 const { report } = useDaemon();
@@ -341,6 +345,8 @@ const groupSelectOptions = computed(() => [
 // ── create new site ──
 const createOpen = ref(false);
 const wordpressCreateOpen = ref(false);
+const COMPOSER_FRAMEWORKS: ComposerFramework[] = ["codeigniter", "cakephp", "slim"];
+const composerCreateOpen = ref<ComposerFramework | null>(null);
 const phpVersionList = computed(() => (report.value?.php ?? []).map((p) => p.version));
 const defaultPhp = computed(() => report.value?.default_php ?? "");
 
@@ -357,6 +363,12 @@ function openCreateWordpress(): void {
   });
 }
 
+function openCreateComposer(framework: ComposerFramework): void {
+  void nextTick(() => {
+    composerCreateOpen.value = framework;
+  });
+}
+
 async function onCreated(): Promise<void> {
   await load({ force: true });
 }
@@ -672,6 +684,15 @@ async function shareSitePublicly(s: Site): Promise<void> {
             <DropdownMenuItem @select="openCreateWordpress">
               <Package class="size-4" /> New WordPress site…
             </DropdownMenuItem>
+            <DropdownMenuItem @select="openCreateComposer('codeigniter')">
+              <Flame class="size-4" /> New CodeIgniter site…
+            </DropdownMenuItem>
+            <DropdownMenuItem @select="openCreateComposer('cakephp')">
+              <CakeSlice class="size-4" /> New CakePHP site…
+            </DropdownMenuItem>
+            <DropdownMenuItem @select="openCreateComposer('slim')">
+              <Feather class="size-4" /> New Slim site…
+            </DropdownMenuItem>
             <DropdownMenuSeparator />
             <DropdownMenuItem @select="linkOpen = true">
               <Link2 class="size-4" /> Link existing site
@@ -962,6 +983,21 @@ async function shareSitePublicly(s: Site): Promise<void> {
       @created="onCreated"
     />
 
+    <!-- create new CodeIgniter / CakePHP / Slim site wizard -->
+    <CreateComposerSiteWizard
+      v-for="framework in COMPOSER_FRAMEWORKS"
+      :key="framework"
+      :open="composerCreateOpen === framework"
+      :framework="framework"
+      :parked-folders="parked"
+      :php-versions="phpVersionList"
+      :default-php="defaultPhp"
+      :tld="tld"
+      :report="report ?? null"
+      @update:open="(v: boolean) => (composerCreateOpen = v ? framework : null)"
+      @created="onCreated"
+    />
+
     <!-- link modal -->
     <Modal v-model:open="linkOpen" title="Link a site">
       <label class="text-sm font-medium" for="linkname">Name (single label)</label>
diff --git a/bin/yerdd/src/codeigniter_url_sync.rs b/bin/yerdd/src/codeigniter_url_sync.rs
new file mode 100644
index 00000000..9ca7e5ed
--- /dev/null
+++ b/bin/yerdd/src/codeigniter_url_sync.rs
@@ -0,0 +1,198 @@
+//! Keeps a `CodeIgniter` 4 site's `app.baseURL` (in its `.env`) in step with
+//! the scheme and domain yerd serves it on - the counterpart of
+//! [`crate::wordpress_url_sync`], run from the same post-mutation hook. The
+//! create wizard writes `app.baseURL` once; without this, toggling HTTPS or
+//! changing the primary domain afterwards left every URL the app generates
+//! pointing at the old address.
+//!
+//! Only an active `app.baseURL` line is rewritten: a commented-out or missing
+//! setting is the user's choice and left alone. Best-effort: a failed write only
+//! logs a warning and never fails the mutation it's attached to.
+
+use yerd_core::{Site, SiteRouter};
+
+use crate::state::DaemonState;
+
+/// Post-mutation hook: if `site` is a `CodeIgniter` 4 project with an active
+/// `app.baseURL` in its `.env`, point it at the site's current URL.
+pub async fn sync_base_url(site: &Site, state: &DaemonState) {
+    let root = site.document_root();
+    if !root.join("spark").is_file() {
+        return;
+    }
+    let dotenv = root.join(".env");
+    let Ok(current) = tokio::fs::read_to_string(&dotenv).await else {
+        return;
+    };
+
+    let Some((host, secure)) = advertised_host(&*state.router.read().await, site.name()) else {
+        return;
+    };
+    let url = crate::public_url::site_url(state, &host, secure).await;
+    let Some(updated) = rewrite_base_url(&current, &format!("{url}/")) else {
+        return;
+    };
+    if let Err(e) = tokio::fs::write(&dotenv, updated).await {
+        tracing::warn!(
+            site = %site.name(),
+            error = %e,
+            "couldn't sync CodeIgniter app.baseURL after a site change"
+        );
+    }
+}
+
+/// The host and secure flag to advertise for `name`, read from the live router
+/// rather than the hook's snapshot so a hook that finishes after a later
+/// mutation cannot write back a stale scheme. `None` when the site is gone or
+/// its primary FQDN routes to a different site (a shadowed apex leaves it
+/// wildcard-only): no concrete host reaches it, so the `.env` is left alone.
+/// Same guard as `tunnel::resolve_site`.
+fn advertised_host(router: &SiteRouter, name: &str) -> Option<(String, bool)> {
+    let secure = router.get(name)?.secure();
+    let host = router.primary_fqdn(name);
+    (router.resolve(&host).map(Site::name) == Some(name)).then_some((host, secure))
+}
+
+/// Replace the first active `app.baseURL` line with `base_url`. Pure - `None`
+/// when there is no active line or it already matches.
+fn rewrite_base_url(env: &str, base_url: &str) -> Option<String> {
+    let wanted = format!("app.baseURL = '{base_url}'");
+    let mut replaced = false;
+    let mut changed = false;
+    let mut lines: Vec<&str> = Vec::new();
+    for line in env.lines() {
+        if !replaced && is_active_base_url(line) {
+            replaced = true;
+            changed = line.trim() != wanted;
+            lines.push(&wanted);
+        } else {
+            lines.push(line);
+        }
+    }
+    if !changed {
+        return None;
+    }
+    let mut out = lines.join("\n");
+    if env.ends_with('\n') {
+        out.push('\n');
+    }
+    Some(out)
+}
+
+fn is_active_base_url(line: &str) -> bool {
+    let line = line.trim_start();
+    !line.starts_with('#')
+        && line
+            .split_once('=')
+            .is_some_and(|(key, _)| key.trim() == "app.baseURL")
+}
+
+#[cfg(test)]
+#[allow(clippy::unwrap_used)]
+mod tests {
+    use super::*;
+    use yerd_config::{Config, DomainDelta};
+    use yerd_core::{Domain, PhpVersion};
+
+    fn router(sites: &[(&str, bool)], deltas: &[(&str, &str)]) -> SiteRouter {
+        let mut cfg = Config::default();
+        cfg.tld = yerd_core::Tld::new("test").unwrap();
+        for (site, domain) in deltas {
+            cfg.domains.linked.insert(
+                (*site).into(),
+                DomainDelta {
+                    added: vec![Domain::parse_subpart(domain).unwrap()],
+                    suppressed: vec![],
+                    primary: None,
+                },
+            );
+        }
+        let sites = sites
+            .iter()
+            .map(|(name, secure)| {
+                let mut s =
+                    Site::linked(name, format!("/srv/{name}"), PhpVersion::new(8, 3)).unwrap();
+                s.set_secure(*secure);
+                s
+            })
+            .collect();
+        crate::site_domains::build(&cfg, sites)
+    }
+
+    #[test]
+    fn advertised_host_is_the_primary_fqdn_with_the_live_secure_flag() {
+        let r = router(&[("blog", true), ("shop", false)], &[]);
+        assert_eq!(
+            advertised_host(&r, "blog"),
+            Some(("blog.test".to_owned(), true))
+        );
+        assert_eq!(
+            advertised_host(&r, "shop"),
+            Some(("shop.test".to_owned(), false))
+        );
+    }
+
+    #[test]
+    fn advertised_host_is_none_when_the_primary_routes_to_another_site() {
+        let r = router(&[("a", false), ("b", false)], &[("a", "*.a"), ("b", "a")]);
+        assert_eq!(r.resolve("a.test").map(Site::name), Some("b"));
+        assert_eq!(advertised_host(&r, "a"), None);
+    }
+
+    #[test]
+    fn advertised_host_is_none_for_an_unknown_site() {
+        let r = router(&[("blog", false)], &[]);
+        assert_eq!(advertised_host(&r, "gone"), None);
+    }
+
+    #[test]
+    fn rewrites_the_active_base_url_line() {
+        let env = "CI_ENVIRONMENT = development\napp.baseURL = 'http://blog.test/'\n";
+        assert_eq!(
+            rewrite_base_url(env, "https://blog.test/").unwrap(),
+            "CI_ENVIRONMENT = development\napp.baseURL = 'https://blog.test/'\n"
+        );
+    }
+
+    #[test]
+    fn keeps_a_missing_trailing_newline_missing() {
+        assert_eq!(
+            rewrite_base_url("app.baseURL = 'http://a.test/'", "https://a.test/").unwrap(),
+            "app.baseURL = 'https://a.test/'"
+        );
+    }
+
+    #[test]
+    fn leaves_commented_missing_and_matching_settings_alone() {
+        for env in [
+            "# app.baseURL = 'http://blog.test/'\n",
+            "CI_ENVIRONMENT = development\n",
+            "app.baseURL = 'https://blog.test/'\n",
+            "",
+        ] {
+            assert_eq!(rewrite_base_url(env, "https://blog.test/"), None, "{env:?}");
+        }
+    }
+
+    #[test]
+    fn only_the_first_active_line_is_rewritten() {
+        let env = "app.baseURL = 'http://a.test/'\napp.baseURL = 'http://b.test/'\n";
+        assert_eq!(
+            rewrite_base_url(env, "https://a.test/").unwrap(),
+            "app.baseURL = 'https://a.test/'\napp.baseURL = 'http://b.test/'\n"
+        );
+    }
+
+    #[test]
+    fn is_active_base_url_ignores_similar_keys() {
+        for (line, expected) in [
+            ("app.baseURL = ''", true),
+            ("  app.baseURL=''", true),
+            ("# app.baseURL = ''", false),
+            ("app.baseURLs = ''", false),
+            ("app.allowedHostnames = []", false),
+        ] {
+            assert_eq!(is_active_base_url(line), expected, "{line:?}");
+        }
+    }
+}
diff --git a/bin/yerdd/src/create_site/composer_project.rs b/bin/yerdd/src/create_site/composer_project.rs
new file mode 100644
index 00000000..99d5b1fb
--- /dev/null
+++ b/bin/yerdd/src/create_site/composer_project.rs
@@ -0,0 +1,396 @@
+//! `composer create-project` scaffolding for frameworks whose official starter
+//! is a Composer project template (`CodeIgniter` 4, `CakePHP`, Slim).
+//!
+//! Preflight resolves PHP + Composer and builds the same per-job `PATH` the
+//! Laravel job uses, so any `php`/`composer` the template's post-install
+//! scripts shell out to runs on the requested version. Scaffolding runs
+//! `composer create-project`; a per-framework post step then fixes up what the
+//! template leaves unsuitable for local development; Registering reuses the
+//! shared [`super::registration`].
+
+use std::path::Path;
+use std::sync::Arc;
+
+use tokio::sync::watch;
+
+use yerd_ipc::{CreateSiteSpec, Framework};
+
+use super::{Composer, Outcome, StreamedOutcome};
+use crate::state::DaemonState;
+use crate::tools;
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub(super) enum Template {
+    Codeigniter,
+    Cakephp,
+    Slim,
+}
+
+impl Template {
+    pub(super) fn from_framework(framework: &Framework) -> Option<Self> {
+        match framework {
+            Framework::Codeigniter => Some(Self::Codeigniter),
+            Framework::Cakephp => Some(Self::Cakephp),
+            Framework::Slim => Some(Self::Slim),
+            _ => None,
+        }
+    }
+
+    fn package(self) -> &'static str {
+        match self {
+            Self::Codeigniter => "codeigniter4/appstarter",
+            Self::Cakephp => "cakephp/app",
+            Self::Slim => "slim/skeleton",
+        }
+    }
+}
+
+/// Preflight + Scaffolding + post step + Registering for a Composer template.
+#[allow(clippy::too_many_lines)]
+pub(super) async fn run(
+    id: &str,
+    name: &str,
+    spec: &CreateSiteSpec,
+    template: Template,
+    job_dir: &Path,
+    state: &Arc<DaemonState>,
+    mut cancel_rx: watch::Receiver<bool>,
+) -> Outcome {
+    let dirs = &state.dirs;
+    let project_dir = spec.parent_dir.join(name);
+
+    state.jobs.set_phase(id, "Preflight").await;
+
+    let php_cli = crate::php_install::cli_binary_path(dirs, spec.php);
+    if !php_cli.is_file() {
+        return Outcome::Failed(format!(
+            "PHP {}.{} is not installed",
+            spec.php.major, spec.php.minor
+        ));
+    }
+
+    let user_dirs = crate::tools::external::resolve_user_path()
+        .await
+        .unwrap_or_default();
+    let data_bin = tools::bin_dir(dirs);
+
+    let composer_phar = tools::composer::phar_path(dirs);
+    let Some(composer) = super::resolve_composer(&composer_phar, &user_dirs, &data_bin, &dirs.data)
+    else {
+        return Outcome::Failed("Composer is not installed - install it first".to_owned());
+    };
+
+    if let Err(msg) = super::check_target_dir(&project_dir) {
+        return Outcome::Failed(msg);
+    }
+    if let Err(msg) = super::probe_writable(&spec.parent_dir) {
+        return Outcome::Failed(msg);
+    }
+
+    let job_bin = match super::build_job_bin(job_dir, &php_cli, composer.managed_phar()) {
+        Ok(b) => b,
+        Err(msg) => return Outcome::Failed(msg),
+    };
+    let path_env = super::composed_path(&job_bin, &data_bin, &user_dirs);
+    let composer_home = tools::laravel::composer_home(dirs);
+
+    state.jobs.set_phase(id, "Scaffolding").await;
+    let args = create_project_args(template, name);
+    state
+        .jobs
+        .push_log(
+            id,
+            format!("$ composer {CREATE_PROJECT} {}", args.join(" ")),
+        )
+        .await;
+
+    let composer_exe = match &composer {
+        Composer::Managed(_) => job_bin.join("composer"),
+        Composer::External(bin) => bin.clone(),
+    };
+    let scaffold = super::run_streamed(
+        id,
+        &composer_exe,
+        &[],
+        Path::new(CREATE_PROJECT),
+        &args,
+        &spec.parent_dir,
+        Some(&path_env),
+        Some(&composer_home),
+        None,
+        false,
+        None,
+        state,
+        &mut cancel_rx,
+    )
+    .await;
+    match scaffold {
+        StreamedOutcome::Ok => {}
+        StreamedOutcome::Failed(msg) => {
+            let _ = std::fs::remove_dir_all(&project_dir);
+            return Outcome::Failed(msg);
+        }
+        StreamedOutcome::Cancelled => {
+            let _ = std::fs::remove_dir_all(&project_dir);
+            return Outcome::Cancelled;
+        }
+    }
+    if !project_dir.join("composer.json").is_file() {
+        let _ = std::fs::remove_dir_all(&project_dir);
+        return Outcome::Failed(format!(
+            "composer {CREATE_PROJECT} finished without creating {}",
+            project_dir.display()
+        ));
+    }
+
+    let tld = state.config.lock().await.tld.as_str().to_owned();
+    let host = format!("{name}.{tld}");
+
+    if template == Template::Codeigniter {
+        let url = crate::public_url::site_url(state, &host, spec.secure).await;
+        if let Err(msg) = write_codeigniter_env(&project_dir, &format!("{url}/")) {
+            let _ = std::fs::remove_dir_all(&project_dir);
+            return Outcome::Failed(format!("could not write .env: {msg}"));
+        }
+    }
+
+    state.jobs.set_phase(id, "Registering").await;
+    if let Err(msg) =
+        super::registration::register(name, &spec.parent_dir, &project_dir, spec, state).await
+    {
+        return Outcome::Failed(format!("scaffolded, but registration failed: {msg}"));
+    }
+    let site = state.router.read().await.get(name).cloned();
+    if let Some(site) = site {
+        crate::codeigniter_url_sync::sync_base_url(&site, state).await;
+    }
+    let url = crate::public_url::browser_url(state, &host, spec.secure).await;
+    state.jobs.push_log(id, format!("serving {url}")).await;
+    Outcome::Succeeded
+}
+
+const CREATE_PROJECT: &str = "create-project";
+
+/// The `composer create-project` arguments after the subcommand. Pure -
+/// unit-tested.
+///
+/// `--no-interaction` accepts each template's post-install defaults (`CakePHP`
+/// asks whether to set folder permissions); `--no-ansi` keeps the plain-text
+/// job log readable, as for `laravel new`.
+fn create_project_args(template: Template, name: &str) -> Vec<String> {
+    vec![
+        "--no-interaction".to_owned(),
+        "--no-ansi".to_owned(),
+        "--prefer-dist".to_owned(),
+        template.package().to_owned(),
+        name.to_owned(),
+    ]
+}
+
+/// `base_url` must end in `/`, which `CodeIgniter`'s `app.baseURL` requires. A
+/// missing `env` template is treated as empty; any other read or write error
+/// fails the create, since the site would otherwise boot in production mode.
+fn write_codeigniter_env(project_dir: &Path, base_url: &str) -> Result<(), String> {
+    let dotenv = project_dir.join(".env");
+    if dotenv.exists() {
+        return Ok(());
+    }
+    let template_path = project_dir.join("env");
+    let template = match std::fs::read_to_string(&template_path) {
+        Ok(t) => t,
+        Err(e) if e.kind() == std::io::ErrorKind::NotFound => String::new(),
+        Err(e) => return Err(format!("{}: {e}", template_path.display())),
+    };
+    std::fs::write(&dotenv, codeigniter_env(&template, base_url))
+        .map_err(|e| format!("{}: {e}", dotenv.display()))
+}
+
+/// Rewrite `CodeIgniter`'s `env` template for local development. Pure -
+/// unit-tested.
+///
+/// The template ships every setting commented out, so the app would boot in
+/// `production` mode (errors hidden) with an empty `app.baseURL`. The first
+/// `CI_ENVIRONMENT` and `app.baseURL` lines, commented or not, are replaced;
+/// either key missing from the template is appended instead.
+fn codeigniter_env(template: &str, base_url: &str) -> String {
+    let env_line = "CI_ENVIRONMENT = development".to_owned();
+    let url_line = format!("app.baseURL = '{base_url}'");
+    let mut env_set = false;
+    let mut url_set = false;
+    let mut lines: Vec<String> = Vec::new();
+    for line in template.lines() {
+        match env_key(line) {
+            Some("CI_ENVIRONMENT") if !env_set => {
+                lines.push(env_line.clone());
+                env_set = true;
+            }
+            Some("app.baseURL") if !url_set => {
+                lines.push(url_line.clone());
+                url_set = true;
+            }
+            _ => lines.push(line.to_owned()),
+        }
+    }
+    if !env_set {
+        lines.push(env_line);
+    }
+    if !url_set {
+        lines.push(url_line);
+    }
+    let mut out = lines.join("\n");
+    out.push('\n');
+    out
+}
+
+/// Key of a `key = value` line, active or commented out. `None` for prose.
+fn env_key(line: &str) -> Option<&str> {
+    let (key, _) = line.trim_start().trim_start_matches('#').split_once('=')?;
+    let key = key.trim();
+    (!key.is_empty() && !key.contains(char::is_whitespace)).then_some(key)
+}
+
+#[cfg(test)]
+#[allow(
+    clippy::unwrap_used,
+    clippy::expect_used,
+    clippy::panic,
+    clippy::indexing_slicing
+)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn from_framework_maps_each_composer_framework() {
+        for (framework, template) in [
+            (Framework::Codeigniter, Template::Codeigniter),
+            (Framework::Cakephp, Template::Cakephp),
+            (Framework::Slim, Template::Slim),
+        ] {
+            assert_eq!(Template::from_framework(&framework), Some(template));
+        }
+    }
+
+    #[test]
+    fn create_project_args_per_template() {
+        for (template, package) in [
+            (Template::Codeigniter, "codeigniter4/appstarter"),
+            (Template::Cakephp, "cakephp/app"),
+            (Template::Slim, "slim/skeleton"),
+        ] {
+            assert_eq!(
+                create_project_args(template, "app"),
+                vec![
+                    "--no-interaction",
+                    "--no-ansi",
+                    "--prefer-dist",
+                    package,
+                    "app"
+                ],
+                "{template:?}"
+            );
+        }
+    }
+
+    #[test]
+    fn env_key_reads_active_and_commented_settings() {
+        for (line, expected) in [
+            ("CI_ENVIRONMENT = production", Some("CI_ENVIRONMENT")),
+            ("# CI_ENVIRONMENT = production", Some("CI_ENVIRONMENT")),
+            ("  #app.baseURL = ''", Some("app.baseURL")),
+            (
+                "# database.default.hostname = localhost",
+                Some("database.default.hostname"),
+            ),
+            ("# If you use this file, rename it to .env", None),
+            ("# Set it = to something", None),
+            ("#--------------------------------", None),
+            ("", None),
+        ] {
+            assert_eq!(env_key(line), expected, "{line:?}");
+        }
+    }
+
+    #[test]
+    fn codeigniter_env_replaces_commented_template_lines() {
+        let template = "\
+#--------------------------------------------------------------------
+# ENVIRONMENT
+#--------------------------------------------------------------------
+
+# CI_ENVIRONMENT = production
+
+#--------------------------------------------------------------------
+# APP
+#--------------------------------------------------------------------
+
+# app.baseURL = ''
+# app.forceGlobalSecureRequests = false
+";
+        let out = codeigniter_env(template, "https://blog.test/");
+        assert!(out.contains("\nCI_ENVIRONMENT = development\n"), "{out}");
+        assert!(
+            out.contains("\napp.baseURL = 'https://blog.test/'\n"),
+            "{out}"
+        );
+        assert!(out.contains("# app.forceGlobalSecureRequests = false\n"));
+        assert!(!out.contains("production"));
+        assert_eq!(out.lines().count(), template.lines().count());
+    }
+
+    #[test]
+    fn codeigniter_env_replaces_only_the_first_occurrence() {
+        let out = codeigniter_env(
+            "# CI_ENVIRONMENT = production\n# CI_ENVIRONMENT = testing\n",
+            "http://a.test/",
+        );
+        assert_eq!(
+            out,
+            "CI_ENVIRONMENT = development\n# CI_ENVIRONMENT = testing\napp.baseURL = 'http://a.test/'\n"
+        );
+    }
+
+    #[test]
+    fn codeigniter_env_appends_missing_keys() {
+        assert_eq!(
+            codeigniter_env("", "http://a.test/"),
+            "CI_ENVIRONMENT = development\napp.baseURL = 'http://a.test/'\n"
+        );
+    }
+
+    #[test]
+    fn write_codeigniter_env_creates_dotenv_from_template() {
+        let tmp = tempfile::tempdir().unwrap();
+        std::fs::write(tmp.path().join("env"), "# CI_ENVIRONMENT = production\n").unwrap();
+        write_codeigniter_env(tmp.path(), "http://a.test/").unwrap();
+        let dotenv = std::fs::read_to_string(tmp.path().join(".env")).unwrap();
+        assert!(dotenv.starts_with("CI_ENVIRONMENT = development\n"));
+    }
+
+    #[test]
+    fn write_codeigniter_env_keeps_existing_dotenv() {
+        let tmp = tempfile::tempdir().unwrap();
+        std::fs::write(tmp.path().join(".env"), "KEEP=1\n").unwrap();
+        write_codeigniter_env(tmp.path(), "http://a.test/").unwrap();
+        let dotenv = std::fs::read_to_string(tmp.path().join(".env")).unwrap();
+        assert_eq!(dotenv, "KEEP=1\n");
+    }
+
+    #[test]
+    fn write_codeigniter_env_treats_a_missing_template_as_empty() {
+        let tmp = tempfile::tempdir().unwrap();
+        write_codeigniter_env(tmp.path(), "http://a.test/").unwrap();
+        let dotenv = std::fs::read_to_string(tmp.path().join(".env")).unwrap();
+        assert_eq!(
+            dotenv,
+            "CI_ENVIRONMENT = development\napp.baseURL = 'http://a.test/'\n"
+        );
+    }
+
+    #[test]
+    fn write_codeigniter_env_fails_on_an_unreadable_template() {
+        let tmp = tempfile::tempdir().unwrap();
+        std::fs::create_dir(tmp.path().join("env")).unwrap();
+        assert!(write_codeigniter_env(tmp.path(), "http://a.test/").is_err());
+        assert!(!tmp.path().join(".env").exists());
+    }
+}
diff --git a/bin/yerdd/src/create_site/laravel.rs b/bin/yerdd/src/create_site/laravel.rs
index 8c4606bd..471ea9b3 100644
--- a/bin/yerdd/src/create_site/laravel.rs
+++ b/bin/yerdd/src/create_site/laravel.rs
@@ -49,13 +49,10 @@ pub(super) async fn run(
     let data_root = &dirs.data;
 
     let composer_phar = tools::composer::phar_path(dirs);
-    let composer_managed = composer_phar.is_file();
-    if !composer_managed
-        && crate::tools::external::find_in_path(&user_dirs, "composer", &data_bin, data_root)
-            .is_none()
-    {
+    let Some(composer) = super::resolve_composer(&composer_phar, &user_dirs, &data_bin, data_root)
+    else {
         return Outcome::Failed("Composer is not installed - install it first".to_owned());
-    }
+    };
 
     let managed_installer = tools::laravel::installer_bin(dirs);
     let installer_bin = if managed_installer.is_file() {
@@ -81,15 +78,11 @@ pub(super) async fn run(
         return Outcome::Failed(msg);
     }
 
-    let job_bin = match build_job_bin(
-        job_dir,
-        &php_cli,
-        composer_managed.then_some(composer_phar.as_path()),
-    ) {
+    let job_bin = match super::build_job_bin(job_dir, &php_cli, composer.managed_phar()) {
         Ok(b) => b,
         Err(msg) => return Outcome::Failed(msg),
     };
-    let path_env = composed_path(&job_bin, &data_bin, &user_dirs);
+    let path_env = super::composed_path(&job_bin, &data_bin, &user_dirs);
     let composer_home = tools::laravel::composer_home(dirs);
 
     if needs_git(options) && !git_available(&path_env).await {
@@ -139,10 +132,9 @@ pub(super) async fn run(
     {
         return Outcome::Failed(format!("scaffolded, but registration failed: {msg}"));
     }
-    state
-        .jobs
-        .push_log(id, format!("serving https://{name}.test"))
-        .await;
+    let tld = state.config.lock().await.tld.as_str().to_owned();
+    let url = crate::public_url::browser_url(state, &format!("{name}.{tld}"), spec.secure).await;
+    state.jobs.push_log(id, format!("serving {url}")).await;
     Outcome::Succeeded
 }
 
@@ -233,19 +225,6 @@ async fn ensure_js_runtime(
     super::ensure_tool(id, tool, user_dirs, state).await
 }
 
-/// Compose `PATH` = `<per-job bin> : <{data}/bin> : <user PATH> : <inherited>`.
-/// The user's resolved PATH is appended so externally-installed
-/// composer/node/bun/git/laravel are findable, while the per-job bin (managed
-/// `php`) and Yerd shims keep precedence.
-fn composed_path(job_bin: &Path, data_bin: &Path, user_dirs: &[PathBuf]) -> std::ffi::OsString {
-    let mut entries = vec![job_bin.to_path_buf(), data_bin.to_path_buf()];
-    entries.extend(user_dirs.iter().cloned());
-    if let Some(existing) = std::env::var_os("PATH") {
-        entries.extend(std::env::split_paths(&existing));
-    }
-    std::env::join_paths(entries).unwrap_or_else(|_| std::ffi::OsString::from(job_bin))
-}
-
 /// `git --version` resolves on the composed PATH.
 async fn git_available(path_env: &std::ffi::OsString) -> bool {
     tokio::process::Command::new("git")
@@ -259,58 +238,6 @@ async fn git_available(path_env: &std::ffi::OsString) -> bool {
         .is_ok_and(|s| s.success())
 }
 
-/// Single-quote a path for safe inclusion in a `/bin/sh` script, escaping any
-/// embedded single quotes (`'` → `'\''`). Without this a data dir containing a
-/// `'` (e.g. `/Users/o'brien/…`) would produce a broken wrapper script.
-#[cfg(unix)]
-fn sh_quote(p: &Path) -> String {
-    format!("'{}'", p.to_string_lossy().replace('\'', "'\\''"))
-}
-
-/// Build `{job_dir}/bin` containing a `php` symlink to the chosen version and,
-/// when `composer_phar` is `Some` (Yerd-managed Composer), a `composer` wrapper
-/// that runs that same PHP so the installer's nested `composer create-project`
-/// uses the requested runtime (Composer derives its child PHP from `PHP_BINARY`).
-/// When `None` (external Composer), no wrapper is written - Composer is found on
-/// the composed PATH and runs under the managed `php` via its shebang. Unix-only.
-#[cfg(unix)]
-fn build_job_bin(
-    job_dir: &Path,
-    php_cli: &Path,
-    composer_phar: Option<&Path>,
-) -> Result<PathBuf, String> {
-    use std::os::unix::fs::PermissionsExt;
-
-    let bin = job_dir.join("bin");
-    std::fs::create_dir_all(&bin).map_err(|e| format!("{}: {e}", bin.display()))?;
-
-    let php_link = bin.join("php");
-    let _ = std::fs::remove_file(&php_link);
-    std::os::unix::fs::symlink(php_cli, &php_link).map_err(|e| format!("link php: {e}"))?;
-
-    if let Some(phar) = composer_phar {
-        let composer = bin.join("composer");
-        let script = format!(
-            "#!/bin/sh\nexec {} {} \"$@\"\n",
-            sh_quote(php_cli),
-            sh_quote(phar)
-        );
-        std::fs::write(&composer, script).map_err(|e| format!("write composer wrapper: {e}"))?;
-        std::fs::set_permissions(&composer, std::fs::Permissions::from_mode(0o755))
-            .map_err(|e| format!("chmod composer wrapper: {e}"))?;
-    }
-    Ok(bin)
-}
-
-#[cfg(not(unix))]
-fn build_job_bin(
-    _job_dir: &Path,
-    _php_cli: &Path,
-    _composer_phar: Option<&Path>,
-) -> Result<PathBuf, String> {
-    Err("site creation is not yet supported on this platform".to_owned())
-}
-
 #[cfg(test)]
 #[allow(
     clippy::unwrap_used,
@@ -472,64 +399,4 @@ mod tests {
         o.starter_kit = StarterKit::Community("acme/kit".to_owned());
         assert!(needs_git(&o));
     }
-
-    #[cfg(unix)]
-    #[test]
-    fn composed_path_puts_job_bin_first() {
-        let job_bin = Path::new("/jobs/abc/bin");
-        let data_bin = Path::new("/data/bin");
-        let user = vec![PathBuf::from("/opt/homebrew/bin")];
-        let composed = composed_path(job_bin, data_bin, &user);
-        let entries: Vec<PathBuf> = std::env::split_paths(&composed).collect();
-        assert_eq!(entries.first().unwrap(), job_bin);
-        assert_eq!(entries.get(1).unwrap(), data_bin);
-        assert!(entries.iter().any(|p| p == Path::new("/opt/homebrew/bin")));
-    }
-
-    #[cfg(unix)]
-    #[test]
-    fn sh_quote_escapes_embedded_single_quotes() {
-        assert_eq!(sh_quote(Path::new("/Users/obrien")), "'/Users/obrien'");
-        assert_eq!(
-            sh_quote(Path::new("/Users/o'brien/data")),
-            "'/Users/o'\\''brien/data'"
-        );
-    }
-
-    #[cfg(unix)]
-    #[test]
-    fn build_job_bin_links_php_and_writes_composer_wrapper() {
-        use std::os::unix::fs::PermissionsExt;
-        let tmp = tempfile::tempdir().unwrap();
-        let job_dir = tmp.path().join("job");
-        let php = tmp.path().join("php-bin");
-        std::fs::write(&php, b"#!fake-php").unwrap();
-        let phar = tmp.path().join("composer.phar");
-        std::fs::write(&phar, b"phar").unwrap();
-
-        let bin = build_job_bin(&job_dir, &php, Some(phar.as_path())).unwrap();
-        assert_eq!(std::fs::read_link(bin.join("php")).unwrap(), php);
-        let wrapper = std::fs::read_to_string(bin.join("composer")).unwrap();
-        assert!(wrapper.starts_with("#!/bin/sh\n"));
-        assert!(wrapper.contains(&php.to_string_lossy().into_owned()));
-        assert!(wrapper.contains(&phar.to_string_lossy().into_owned()));
-        let mode = std::fs::metadata(bin.join("composer"))
-            .unwrap()
-            .permissions()
-            .mode();
-        assert_eq!(mode & 0o111, 0o111, "wrapper should be executable");
-    }
-
-    #[cfg(unix)]
-    #[test]
-    fn build_job_bin_without_phar_writes_no_composer_wrapper() {
-        let tmp = tempfile::tempdir().unwrap();
-        let job_dir = tmp.path().join("job");
-        let php = tmp.path().join("php-bin");
-        std::fs::write(&php, b"#!fake-php").unwrap();
-
-        let bin = build_job_bin(&job_dir, &php, None).unwrap();
-        assert!(bin.join("php").exists());
-        assert!(!bin.join("composer").exists());
-    }
 }
diff --git a/bin/yerdd/src/create_site/mod.rs b/bin/yerdd/src/create_site/mod.rs
index 56475168..c2fc507b 100644
--- a/bin/yerdd/src/create_site/mod.rs
+++ b/bin/yerdd/src/create_site/mod.rs
@@ -1,5 +1,5 @@
-//! `CreateSite` - scaffold a new project (`laravel new` or WP-CLI) then
-//! register it.
+//! `CreateSite` - scaffold a new project (`laravel new`, WP-CLI or
+//! `composer create-project`) then register it.
 //!
 //! Scaffolding runs far longer than one request/response round-trip and streams
 //! output, so this runs as a background [job](crate::jobs): [`start`] spawns the
@@ -8,10 +8,11 @@
 //!
 //! This module holds the framework-agnostic job orchestration (name
 //! reservation, the per-job scratch dir, `JobRegistry` wiring, the streamed-
-//! process runner, registration); [`laravel`] and [`wordpress`] hold each
-//! framework's own scaffolding body, dispatched on `spec.framework` from
-//! [`run_inner`].
+//! process runner, registration); [`laravel`], [`wordpress`] and
+//! [`composer_project`] hold each framework's own scaffolding body, dispatched
+//! on `spec.framework` from [`run_inner`].
 
+mod composer_project;
 mod laravel;
 mod registration;
 mod wordpress;
@@ -39,7 +40,11 @@ pub async fn start(spec: CreateSiteSpec, state: Arc<DaemonState>) -> Response {
     // The enum is `#[non_exhaustive]`, so a catch-all is required and guards
     // future variants.
     match &spec.framework {
-        Framework::Laravel { .. } | Framework::Wordpress { .. } => {}
+        Framework::Laravel { .. }
+        | Framework::Wordpress { .. }
+        | Framework::Codeigniter
+        | Framework::Cakephp
+        | Framework::Slim => {}
         _ => return error(ErrorCode::Internal, "unsupported framework".to_owned()),
     }
 
@@ -122,7 +127,12 @@ async fn run_inner(
         Framework::Wordpress { options } => {
             wordpress::run(id, name, spec, options, state, cancel_rx).await
         }
-        _ => Outcome::Failed("unsupported framework".to_owned()),
+        framework => match composer_project::Template::from_framework(framework) {
+            Some(template) => {
+                composer_project::run(id, name, spec, template, job_dir, state, cancel_rx).await
+            }
+            None => Outcome::Failed("unsupported framework".to_owned()),
+        },
     }
 }
 
@@ -419,6 +429,104 @@ fn kill_group(pgid: Option<u32>, signal: nix::sys::signal::Signal) {
     }
 }
 
+/// The Composer a job runs: Yerd's managed phar, or one from the user's PATH.
+#[derive(Debug, PartialEq, Eq)]
+enum Composer {
+    Managed(PathBuf),
+    /// A `composer` from the user's PATH. Executed directly rather than as a
+    /// PHP script, because it may be a shell shim (mise, asdf, Nix); its own
+    /// `php` still resolves to the job's PHP through the composed PATH.
+    External(PathBuf),
+}
+
+impl Composer {
+    fn managed_phar(&self) -> Option<&Path> {
+        match self {
+            Self::Managed(phar) => Some(phar.as_path()),
+            Self::External(_) => None,
+        }
+    }
+}
+
+fn resolve_composer(
+    managed_phar: &Path,
+    user_dirs: &[PathBuf],
+    data_bin: &Path,
+    data_root: &Path,
+) -> Option<Composer> {
+    if managed_phar.is_file() {
+        return Some(Composer::Managed(managed_phar.to_path_buf()));
+    }
+    crate::tools::external::find_in_path(user_dirs, "composer", data_bin, data_root)
+        .map(Composer::External)
+}
+
+/// Compose `PATH` = `<per-job bin> : <{data}/bin> : <user PATH> : <inherited>`.
+/// The user's resolved PATH is appended so externally-installed
+/// composer/node/bun/git/laravel are findable, while the per-job bin (managed
+/// `php`) and Yerd shims keep precedence.
+fn composed_path(job_bin: &Path, data_bin: &Path, user_dirs: &[PathBuf]) -> std::ffi::OsString {
+    let mut entries = vec![job_bin.to_path_buf(), data_bin.to_path_buf()];
+    entries.extend(user_dirs.iter().cloned());
+    if let Some(existing) = std::env::var_os("PATH") {
+        entries.extend(std::env::split_paths(&existing));
+    }
+    std::env::join_paths(entries).unwrap_or_else(|_| std::ffi::OsString::from(job_bin))
+}
+
+/// Single-quote a path for safe inclusion in a `/bin/sh` script, escaping any
+/// embedded single quotes (`'` → `'\''`). Without this a data dir containing a
+/// `'` (e.g. `/Users/o'brien/…`) would produce a broken wrapper script.
+#[cfg(unix)]
+fn sh_quote(p: &Path) -> String {
+    format!("'{}'", p.to_string_lossy().replace('\'', "'\\''"))
+}
+
+/// Build `{job_dir}/bin` containing a `php` symlink to the chosen version and,
+/// when `composer_phar` is `Some` (Yerd-managed Composer), a `composer` wrapper
+/// that runs that same PHP so every `composer` call on the job's PATH (the
+/// Laravel installer's nested `create-project` included) uses the requested
+/// runtime (Composer derives its child PHP from `PHP_BINARY`).
+/// When `None` (external Composer), no wrapper is written - Composer is found on
+/// the composed PATH and runs under the managed `php` via its shebang. Unix-only.
+#[cfg(unix)]
+fn build_job_bin(
+    job_dir: &Path,
+    php_cli: &Path,
+    composer_phar: Option<&Path>,
+) -> Result<PathBuf, String> {
+    use std::os::unix::fs::PermissionsExt;
+
+    let bin = job_dir.join("bin");
+    std::fs::create_dir_all(&bin).map_err(|e| format!("{}: {e}", bin.display()))?;
+
+    let php_link = bin.join("php");
+    let _ = std::fs::remove_file(&php_link);
+    std::os::unix::fs::symlink(php_cli, &php_link).map_err(|e| format!("link php: {e}"))?;
+
+    if let Some(phar) = composer_phar {
+        let composer = bin.join("composer");
+        let script = format!(
+            "#!/bin/sh\nexec {} {} \"$@\"\n",
+            sh_quote(php_cli),
+            sh_quote(phar)
+        );
+        std::fs::write(&composer, script).map_err(|e| format!("write composer wrapper: {e}"))?;
+        std::fs::set_permissions(&composer, std::fs::Permissions::from_mode(0o755))
+            .map_err(|e| format!("chmod composer wrapper: {e}"))?;
+    }
+    Ok(bin)
+}
+
+#[cfg(not(unix))]
+fn build_job_bin(
+    _job_dir: &Path,
+    _php_cli: &Path,
+    _composer_phar: Option<&Path>,
+) -> Result<PathBuf, String> {
+    Err("site creation is not yet supported on this platform".to_owned())
+}
+
 fn error(code: ErrorCode, message: String) -> Response {
     Response::Error { code, message }
 }
@@ -570,6 +678,25 @@ mod tests {
         }
     }
 
+    #[tokio::test]
+    async fn start_accepts_composer_frameworks() {
+        for framework in [Framework::Codeigniter, Framework::Cakephp, Framework::Slim] {
+            let tmp = tempfile::tempdir().unwrap();
+            let state = Arc::new(crate::test_support::state_in(tmp.path()));
+            let spec = CreateSiteSpec {
+                name: "app".to_owned(),
+                parent_dir: tmp.path().to_path_buf(),
+                php: PhpVersion::new(8, 3),
+                secure: false,
+                framework,
+            };
+            match start(spec, state).await {
+                Response::JobStarted { .. } => {}
+                other => panic!("expected JobStarted, got {other:?}"),
+            }
+        }
+    }
+
     #[tokio::test]
     async fn ensure_managed_tool_short_circuits_on_managed_marker() {
         let tmp = tempfile::tempdir().unwrap();
@@ -609,4 +736,109 @@ mod tests {
             .unwrap_err();
         assert!(err.contains("failed to install WP-CLI"), "{err}");
     }
+
+    #[cfg(unix)]
+    #[test]
+    fn composed_path_puts_job_bin_first() {
+        let job_bin = Path::new("/jobs/abc/bin");
+        let data_bin = Path::new("/data/bin");
+        let user = vec![PathBuf::from("/opt/homebrew/bin")];
+        let composed = composed_path(job_bin, data_bin, &user);
+        let entries: Vec<PathBuf> = std::env::split_paths(&composed).collect();
+        assert_eq!(entries.first().unwrap(), job_bin);
+        assert_eq!(entries.get(1).unwrap(), data_bin);
+        assert!(entries.iter().any(|p| p == Path::new("/opt/homebrew/bin")));
+    }
+
+    #[cfg(unix)]
+    #[test]
+    fn sh_quote_escapes_embedded_single_quotes() {
+        assert_eq!(sh_quote(Path::new("/Users/obrien")), "'/Users/obrien'");
+        assert_eq!(
+            sh_quote(Path::new("/Users/o'brien/data")),
+            "'/Users/o'\\''brien/data'"
+        );
+    }
+
+    #[cfg(unix)]
+    #[test]
+    fn build_job_bin_links_php_and_writes_composer_wrapper() {
+        use std::os::unix::fs::PermissionsExt;
+        let tmp = tempfile::tempdir().unwrap();
+        let job_dir = tmp.path().join("job");
+        let php = tmp.path().join("php-bin");
+        std::fs::write(&php, b"#!fake-php").unwrap();
+        let phar = tmp.path().join("composer.phar");
+        std::fs::write(&phar, b"phar").unwrap();
+
+        let bin = build_job_bin(&job_dir, &php, Some(phar.as_path())).unwrap();
+        assert_eq!(std::fs::read_link(bin.join("php")).unwrap(), php);
+        let wrapper = std::fs::read_to_string(bin.join("composer")).unwrap();
+        assert!(wrapper.starts_with("#!/bin/sh\n"));
+        assert!(wrapper.contains(&php.to_string_lossy().into_owned()));
+        assert!(wrapper.contains(&phar.to_string_lossy().into_owned()));
+        let mode = std::fs::metadata(bin.join("composer"))
+            .unwrap()
+            .permissions()
+            .mode();
+        assert_eq!(mode & 0o111, 0o111, "wrapper should be executable");
+    }
+
+    #[cfg(unix)]
+    #[test]
+    fn build_job_bin_without_phar_writes_no_composer_wrapper() {
+        let tmp = tempfile::tempdir().unwrap();
+        let job_dir = tmp.path().join("job");
+        let php = tmp.path().join("php-bin");
+        std::fs::write(&php, b"#!fake-php").unwrap();
+
+        let bin = build_job_bin(&job_dir, &php, None).unwrap();
+        assert!(bin.join("php").exists());
+        assert!(!bin.join("composer").exists());
+    }
+
+    #[test]
+    fn resolve_composer_prefers_managed_phar() {
+        let tmp = tempfile::tempdir().unwrap();
+        let phar = tmp.path().join("composer.phar");
+        std::fs::write(&phar, b"phar").unwrap();
+        let got = resolve_composer(&phar, &[], &tmp.path().join("bin"), tmp.path());
+        assert_eq!(got, Some(Composer::Managed(phar)));
+    }
+
+    #[cfg(unix)]
+    #[test]
+    fn resolve_composer_falls_back_to_external_on_path() {
+        use std::os::unix::fs::PermissionsExt as _;
+
+        let tmp = tempfile::tempdir().unwrap();
+        let ext = tmp.path().join("extbin");
+        std::fs::create_dir_all(&ext).unwrap();
+        let shim = ext.join("composer");
+        std::fs::write(&shim, b"#!/bin/sh\n").unwrap();
+        std::fs::set_permissions(&shim, std::fs::Permissions::from_mode(0o755)).unwrap();
+
+        let data = tmp.path().join("data");
+        std::fs::create_dir_all(&data).unwrap();
+
+        let got = resolve_composer(
+            &data.join("composer.phar"),
+            &[ext],
+            &data.join("bin"),
+            &data,
+        );
+        assert_eq!(got, Some(Composer::External(shim)));
+    }
+
+    #[test]
+    fn resolve_composer_none_without_managed_or_external() {
+        let tmp = tempfile::tempdir().unwrap();
+        let got = resolve_composer(
+            &tmp.path().join("missing.phar"),
+            &[],
+            &tmp.path().join("bin"),
+            tmp.path(),
+        );
+        assert_eq!(got, None);
+    }
 }
diff --git a/bin/yerdd/src/ipc_server.rs b/bin/yerdd/src/ipc_server.rs
index f98d3e0e..0c6cf455 100644
--- a/bin/yerdd/src/ipc_server.rs
+++ b/bin/yerdd/src/ipc_server.rs
@@ -2638,6 +2638,7 @@ pub(crate) async fn handle_mutation(req: Request, state: &DaemonState) -> Respon
 
     if let Some(site) = site_after {
         crate::wordpress_url_sync::sync_site_url(&site, state).await;
+        crate::codeigniter_url_sync::sync_base_url(&site, state).await;
     }
 
     tracing::info!(summary = %applied.summary, "applied mutation");
@@ -2645,9 +2646,10 @@ pub(crate) async fn handle_mutation(req: Request, state: &DaemonState) -> Respon
 }
 
 /// The post-mutation site to run [`crate::wordpress_url_sync::sync_site_url`]
-/// against: `SetSecure` (which flips the scheme) plus every domain mutation
-/// (each of which can change the primary domain a WordPress install should
-/// advertise). `AddDomain` is included, not just `SetPrimaryDomain`/`ResetDomains`
+/// and [`crate::codeigniter_url_sync::sync_base_url`] against: `SetSecure`
+/// (which flips the scheme) plus every domain mutation (each of which can
+/// change the primary domain a WordPress install should advertise).
+/// `AddDomain` is included, not just `SetPrimaryDomain`/`ResetDomains`
 /// /`RemoveDomain`: re-adding a previously-suppressed apex when the delta holds no
 /// stored primary flips the derived primary back to the apex (`choose_primary`
 /// prefers the apex over the first exact), so an add can change the primary too.
diff --git a/bin/yerdd/src/lib.rs b/bin/yerdd/src/lib.rs
index b78ad1a8..604522d7 100644
--- a/bin/yerdd/src/lib.rs
+++ b/bin/yerdd/src/lib.rs
@@ -14,6 +14,7 @@ pub mod ansi;
 pub mod args;
 pub mod backend_resolver;
 pub mod cert_store;
+pub mod codeigniter_url_sync;
 pub mod create_site;
 pub mod db_admin;
 pub mod detect_cache;
@@ -28,6 +29,7 @@ pub mod laravel_detect;
 pub mod mutate;
 pub mod php_install;
 pub mod php_updates;
+pub mod public_url;
 pub mod secure_fs;
 pub mod self_update;
 pub mod service_install;
diff --git a/bin/yerdd/src/public_url.rs b/bin/yerdd/src/public_url.rs
new file mode 100644
index 00000000..b164294d
--- /dev/null
+++ b/bin/yerdd/src/public_url.rs
@@ -0,0 +1,152 @@
+//! Site URLs for what the daemon writes into projects and job logs, mirroring
+//! the GUI's `siteUrl`: the bound port is included only on a rootless fallback
+//! (8080/8443) with no 80/443 redirect in front of it.
+//!
+//! [`site_url`] is the site's own address, for values baked into a project
+//! (`CodeIgniter`'s `app.baseURL`). [`browser_url`] is what to open right now:
+//! when `.test` names don't resolve (resolver not installed, or the DNS
+//! responder failed to bind) it is the `http://localhost/~{host}` switch URL
+//! instead. That switch URL pins a cookie and 303-redirects to the path after
+//! it, so it must never be used as a base URL: a form POST through it would
+//! arrive as a GET.
+
+use crate::state::DaemonState;
+
+/// `scheme://host[:port]` (no trailing slash) for `host` served with `secure`,
+/// from the daemon's bound ports and the live port-redirect state.
+pub async fn site_url(state: &DaemonState, host: &str, secure: bool) -> String {
+    let (bound, default) = if secure {
+        (state.https.bound, 443)
+    } else {
+        (state.http.bound, 80)
+    };
+    let redirected = tokio::task::spawn_blocking(|| {
+        use yerd_platform::PortRedirector;
+        yerd_platform::ActivePortRedirector::new().is_active()
+    })
+    .await
+    .ok()
+    .flatten();
+    format_url(
+        host,
+        secure,
+        url_port(bound, default, redirected == Some(true)),
+    )
+}
+
+/// The URL to show a user for opening `host` now: [`site_url`], or the
+/// localhost switch URL while `.test` names don't resolve.
+pub async fn browser_url(state: &DaemonState, host: &str, secure: bool) -> String {
+    let tld = state.router.read().await.config().tld().to_owned();
+    let dns_addr = state.dns_addr;
+    let resolver_installed = tokio::task::spawn_blocking(move || {
+        use yerd_platform::ResolverInstaller;
+        yerd_platform::ActiveResolverInstaller::new()
+            .is_installed(&tld, dns_addr)
+            .ok()
+    })
+    .await
+    .ok()
+    .flatten();
+    if is_unbound(resolver_installed, state.dns_unbound.is_some()) {
+        return unbound_url(host, state.http.bound);
+    }
+    site_url(state, host, secure).await
+}
+
+/// The GUI's `isUnbound`: only a resolver known to be installed counts as on,
+/// and a DNS responder that failed to bind means names won't resolve anyway.
+fn is_unbound(resolver_installed: Option<bool>, dns_unbound: bool) -> bool {
+    resolver_installed != Some(true) || dns_unbound
+}
+
+/// The GUI's `unboundUrlFor`: always plain http (there is no localhost cert),
+/// an unbound (`0`) port falls back to 8080, and port 80 is omitted.
+fn unbound_url(host: &str, http_bound: u16) -> String {
+    let port = if http_bound == 0 { 8080 } else { http_bound };
+    let port = if port == 80 {
+        String::new()
+    } else {
+        format!(":{port}")
+    };
+    format!("http://localhost{port}/~{host}")
+}
+
+/// No port when redirected, unbound (`0`) or the scheme default. Pure.
+fn url_port(bound: u16, default: u16, redirected: bool) -> Option<u16> {
+    (!redirected && bound != 0 && bound != default).then_some(bound)
+}
+
+fn format_url(host: &str, secure: bool, port: Option<u16>) -> String {
+    let scheme = if secure { "https" } else { "http" };
+    let port = port.map(|p| format!(":{p}")).unwrap_or_default();
+    format!("{scheme}://{host}{port}")
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn url_port_only_for_unredirected_non_default_ports() {
+        for (bound, default, redirected, expected) in [
+            (443, 443, false, None),
+            (80, 80, false, None),
+            (8443, 443, false, Some(8443)),
+            (8080, 80, false, Some(8080)),
+            (8443, 443, true, None),
+            (0, 443, false, None),
+        ] {
+            assert_eq!(
+                url_port(bound, default, redirected),
+                expected,
+                "{bound} {default} {redirected}"
+            );
+        }
+    }
+
+    #[test]
+    fn is_unbound_unless_the_resolver_is_known_installed_and_dns_bound() {
+        for (installed, dns_unbound, expected) in [
+            (Some(true), false, false),
+            (Some(true), true, true),
+            (Some(false), false, true),
+            (None, false, true),
+        ] {
+            assert_eq!(
+                is_unbound(installed, dns_unbound),
+                expected,
+                "{installed:?} {dns_unbound}"
+            );
+        }
+    }
+
+    #[test]
+    fn unbound_url_is_plain_http_on_localhost() {
+        for (host, bound, expected) in [
+            ("blog.test", 80, "http://localhost/~blog.test"),
+            ("blog.test", 8080, "http://localhost:8080/~blog.test"),
+            ("blog.test", 0, "http://localhost:8080/~blog.test"),
+            (
+                "corp.dev.local",
+                8081,
+                "http://localhost:8081/~corp.dev.local",
+            ),
+        ] {
+            assert_eq!(unbound_url(host, bound), expected, "{host} {bound}");
+        }
+    }
+
+    #[test]
+    fn format_url_uses_scheme_host_and_port() {
+        for (host, secure, port, expected) in [
+            ("blog.test", true, None, "https://blog.test"),
+            ("blog.test", false, None, "http://blog.test"),
+            ("blog.dev.local", true, None, "https://blog.dev.local"),
+            ("blog.test", true, Some(8443), "https://blog.test:8443"),
+            ("blog.test", false, Some(8080), "http://blog.test:8080"),
+        ] {
+            assert_eq!(format_url(host, secure, port), expected);
+        }
+    }
+}
diff --git a/crates/yerd-ipc/src/create.rs b/crates/yerd-ipc/src/create.rs
index ca26a228..6e157618 100644
--- a/crates/yerd-ipc/src/create.rs
+++ b/crates/yerd-ipc/src/create.rs
@@ -64,6 +64,15 @@ pub enum Framework {
         /// WordPress-specific installer options.
         options: WordPressOptions,
     },
+    /// Scaffold a `CodeIgniter` 4 app via `composer create-project
+    /// codeigniter4/appstarter`. Spelled `Codeigniter` so the wire tag is
+    /// `"codeigniter"`, same reason as [`Framework::Wordpress`].
+    Codeigniter,
+    /// Scaffold a `CakePHP` app via `composer create-project cakephp/app`.
+    /// Spelled `Cakephp` so the wire tag is `"cakephp"`.
+    Cakephp,
+    /// Scaffold a Slim 4 app via `composer create-project slim/skeleton`.
+    Slim,
 }
 
 /// Options mapped onto `laravel new` flags.
diff --git a/crates/yerd-ipc/tests/wire_stability.rs b/crates/yerd-ipc/tests/wire_stability.rs
index a8d12c87..73059527 100644
--- a/crates/yerd-ipc/tests/wire_stability.rs
+++ b/crates/yerd-ipc/tests/wire_stability.rs
@@ -2679,6 +2679,32 @@ fn request_create_site_wordpress_byte_shape() {
     assert_eq!(serde_json::from_str::<Request>(&s).unwrap(), r);
 }
 
+#[test]
+fn request_create_site_composer_frameworks_byte_shape() {
+    use yerd_ipc::{CreateSiteSpec, Framework};
+    for (framework, tag) in [
+        (Framework::Codeigniter, "codeigniter"),
+        (Framework::Cakephp, "cakephp"),
+        (Framework::Slim, "slim"),
+    ] {
+        let r = Request::CreateSite {
+            spec: CreateSiteSpec {
+                name: "app".into(),
+                parent_dir: PathBuf::from("/srv"),
+                php: PhpVersion::new(8, 3),
+                secure: false,
+                framework,
+            },
+        };
+        let s = serde_json::to_string(&r).unwrap();
+        let expected = format!(
+            r#"{{"type":"create_site","spec":{{"name":"app","parent_dir":"/srv","php":"8.3","secure":false,"framework":{{"framework":"{tag}"}}}}}}"#
+        );
+        assert_eq!(s, expected);
+        assert_eq!(serde_json::from_str::<Request>(&s).unwrap(), r);
+    }
+}
+
 #[test]
 fn request_job_status_byte_shape() {
     let r = Request::JobStatus {
diff --git a/docs/developer/binaries/yerdd.md b/docs/developer/binaries/yerdd.md
index 6919e60d..b3780ddb 100644
--- a/docs/developer/binaries/yerdd.md
+++ b/docs/developer/binaries/yerdd.md
@@ -100,6 +100,7 @@ The daemon's modules (`src/lib.rs` re-exports each as `pub mod`):
 | `state` | `DaemonState` - the shared config + router + lifecycle channel. |
 | `ipc_server` | IPC accept loop and per-request dispatch. |
 | `cert_store` | `DaemonCertStore` - per-SNI leaf issuance/cache for the proxy. |
+| `codeigniter_url_sync` | Keeps an active `app.baseURL` in a `CodeIgniter` 4 site's `.env` in sync with its HTTPS toggle and primary domain. Left unchanged when the primary domain routes to a different site (a shadowed apex). |
 | `backend_resolver` | `DaemonBackendResolver` - routes a `Site` to a live FPM pool. |
 | `detect_cache` | `DetectCache` - memoises web-root detection per project, keyed on a freshness stamp. |
 | `fs_watch` | Debounced filesystem watcher that re-scans parked roots as projects appear/change. |
@@ -107,11 +108,12 @@ The daemon's modules (`src/lib.rs` re-exports each as `pub mod`):
 | `site_domains` | Infallible, collision-resolving router builder (`build`) plus `collisions`, which reports the losing side of each domain clash (surfaced as `StatusReport.shadows`). Resolves domains for whole-host proxies as well as sites - every site is considered before any proxy. |
 | `php_install` | Download + unpack prebuilt PHP builds; `reqwest` downloader. |
 | `php_updates` | PHP update poller + cache (notify-only). |
+| `public_url` | Site URLs mirroring the GUI's `siteUrl` (scheme, host, and the bound port on an unredirected rootless fallback): `site_url` for values written into projects, and `browser_url` for job-log links, which switches to the `http://localhost/~{host}` fallback when `.test` names don't resolve. |
 | `self_update` | Yerd self-update poller: fetches the GitHub Releases API, decides via the pure `yerd-update` crate, and persists a snapshot (`checked_at` + decision) both to disk and in `DaemonState` (notify-only). |
 | `dump_server` | Loopback TCP server reading newline-delimited JSON dump frames from the native `yerd-dump` extension into a bounded ring buffer; serves the ring to the GUI over IPC (`ListDumps`/`DumpsStatus`/…). |
 | `ext_install` | Downloads + SHA-256-verifies native PHP extension `.so`s per installed PHP version (from the `forjedio/yerd-php-ext` releases) into `{data}/php-ext/php-<ver>/`. An `ExtSpec` abstraction drives one fetch loop for **both** `yerd-dump` (`DUMP_SPEC`, gated on dumps) and `pcov` (`PCOV_SPEC`, ungated) - two manifests, one release. |
 | `tools` | Dev-tool installers (Composer, Node, Bun, the Laravel installer, WP-CLI): download/build + verify into `{data}/tools/<id>/` and reconcile their `{data}/bin` shims. See [Dev-tool installers](../dev-tools). |
-| `create_site` | Site-scaffolding job bodies for the GUI wizard (`laravel.rs`, `wordpress.rs`) - see [WordPress support](#wordpress-support) below. |
+| `create_site` | Site-scaffolding job bodies for the GUI wizards (`laravel.rs`, `wordpress.rs`, and `composer_project.rs` for the CodeIgniter/CakePHP/Slim `composer create-project` templates) - see [WordPress support](#wordpress-support) below. |
 | `wordpress_detect` | Narrow marker-file check for whether a site is a `WordPress` install (`wp-config.php`/`wp-load.php`). |
 | `wordpress_login` | One-click `WordPress` admin login: token registry + the `auto_prepend_file` bootstrap script. |
 | `wordpress_url_sync` | Keeps a `WordPress` site's own `siteurl`/`home` options in sync with its HTTP/HTTPS toggle. |
@@ -240,7 +242,7 @@ After `run_until_shutdown` returns, the signal task is **aborted** rather than a
 - **Dumps (Laravel telemetry):** `ListDumps` (pages the ring), `ClearDumps`, `DeleteDump`, `DumpsStatus`, `SetDumpsEnabled` (first enable fetches the `.so` and restarts started pools), `SetDumpsPort` (test-binds then triggers a hot rebind), `SetDumpsPersist`, `SetDumpFeature` → `dump_server::*`.
 - **Mail capture:** `ListMails`, `GetMail`, `ClearMails`, `DeleteMails`, `MarkMailsRead` (marks the given mails read in the store), `SetMailPort`, `SetMailEnabled` (port/enabled persist to config and take effect on the next restart - no hot rebind) → the `mail_store` / `set_mail_*` handlers. `Status` reports the store's total and unread counts via `MailStatus`.
 - **Dev tools:** `ListTools` (pure fs status), `InstallTool`/`UninstallTool` → `tools::*` then a `{data}/bin` shim reconcile. See [Dev-tool installers](../dev-tools).
-- **WordPress:** `CreateSite` (WordPress or Laravel spec) → a background job under `create_site::*`, polled via `JobStatus`. `MintWordpressLoginToken`, `SetWordpressAutoLogin` → `handle_mutation`, `WordpressAdminUsers`, `AvailableWordpressVersions` → `wordpress_login::*` / `wordpress_users::*` / `wordpress_versions::*`. See [WordPress support](#wordpress-support) above.
+- **WordPress:** `CreateSite` (Laravel, WordPress, CodeIgniter, CakePHP or Slim spec) → a background job under `create_site::*`, polled via `JobStatus`. `MintWordpressLoginToken`, `SetWordpressAutoLogin` → `handle_mutation`, `WordpressAdminUsers`, `AvailableWordpressVersions` → `wordpress_login::*` / `wordpress_users::*` / `wordpress_versions::*`. See [WordPress support](#wordpress-support) above.
 - **Lifecycle:** `RestartDaemon` (Unix only).
 
 The dispatch also routes the **services / database-admin** families (`ListServices`, `InstallService`, `StartService`/`StopService`/`RestartService`, `CreateDatabase`/`ListDatabases`/`DropDatabase`/`BackupDatabase`/`RestoreDatabase`, …) to `services::*` / `db_admin::*`.
diff --git a/docs/guide/desktop-app.md b/docs/guide/desktop-app.md
index ad14cdea..d72eb8ac 100644
--- a/docs/guide/desktop-app.md
+++ b/docs/guide/desktop-app.md
@@ -69,7 +69,7 @@ The card itself keeps only the inline shortcuts - open, the HTTPS lock, and that
 
 The filter box above the list matches **any** domain a site answers, not just its name - typing `admin.` finds `codestash.test` when its only match is an added `admin.codestash.test`.
 
-Sites can also be organized into named, reorderable groups shown as collapsible sections on this page; see [Sites](./sites) for the full walkthrough. The **Create** menu at the top of the page offers New Laravel site…, New WordPress site…, Link existing site, Park folder, and New group….
+Sites can also be organized into named, reorderable groups shown as collapsible sections on this page; see [Sites](./sites) for the full walkthrough. The **Create** menu at the top of the page offers New Laravel site…, New WordPress site…, New CodeIgniter site…, New CakePHP site…, New Slim site…, Link existing site, Park folder, and New group….
 
 #### The site details sidebar
 
diff --git a/docs/guide/sites.md b/docs/guide/sites.md
index ec3af995..21eef6d3 100644
--- a/docs/guide/sites.md
+++ b/docs/guide/sites.md
@@ -124,6 +124,22 @@ A final summary of your choices. Click **Create** and the dialog switches to a l
 
 When it finishes, the site is on disk, registered, served at `<name>.test`, and ready to use - **Open folder**, **Open in browser**, or **WP Admin** to sign in as the administrator you just created (see below).
 
+## Create a new CodeIgniter, CakePHP or Slim site
+
+The **Create** menu can also scaffold a project from a framework's official Composer template. Choose **New CodeIgniter site**, **New CakePHP site** or **New Slim site** to open a two-step wizard, **Basics → Review**, that runs `composer create-project` under the PHP version you pick and registers the result as a `.test` site automatically.
+
+| Framework | Template | PHP |
+|---|---|---|
+| CodeIgniter 4 | `codeigniter4/appstarter` | 8.1+ |
+| CakePHP | `cakephp/app` | 8.1+ |
+| Slim 4 | `slim/skeleton` | 7.4+ |
+
+::: tip Prerequisites
+These wizards need a PHP version the framework supports and **Composer**. If either is missing, the wizard offers to install it. An [externally installed](./tooling#external-tools) Composer works too.
+:::
+
+The **Basics** step matches the other wizards: project name, location, PHP version and HTTPS. The web root is detected automatically: `public/` for CodeIgniter and Slim, `webroot/` for CakePHP. A new CodeIgniter site also gets a `.env` created from its `env` template, with `CI_ENVIRONMENT = development` and `app.baseURL` set to the site's URL, so errors show while you work. Yerd keeps an active `app.baseURL` in step when you later toggle HTTPS or change the site's primary domain. A commented-out one is left alone. No database is created. Configure one in the project as usual - see [Services & Databases](./services).
+
 ## WordPress one-click admin login
 
 A WordPress site created through the wizard has **one-click admin login** turned on by default: opening **WP Admin** signs you in as the site's administrator instead of showing WordPress's own login screen. Existing or parked WordPress sites can opt in the same way.