diff --git a/docs/components/OpsWizard.astro b/docs/components/OpsWizard.astro index ce10c46..051169a 100644 --- a/docs/components/OpsWizard.astro +++ b/docs/components/OpsWizard.astro @@ -161,6 +161,16 @@ const agents = [

       
       

+ +
+

Prompt copied

+

+ Create a repository, then paste the copied prompt into the starter text box to start setting up your control + plane. +

+ +
+
@@ -271,8 +281,22 @@ const agents = [ const installHint = form.querySelector("[data-agent-install-hint]"); const copyButton = form.querySelector("[data-copy-prompt]"); const copyLabel = copyButton?.querySelector(".copy-label"); + const copyDialog = form.querySelector("[data-copy-dialog]"); + const copyDialogClose = form.querySelector("[data-copy-dialog-close]"); let resetCopyLabel: ReturnType | undefined; + function openCopyDialog() { + if (!copyDialog) return; + if (typeof copyDialog.showModal === "function") { + if (!copyDialog.open) copyDialog.showModal(); + } + } + + function resetCopyState() { + if (copyLabel) copyLabel.textContent = "Copy prompt"; + copyButton?.classList.remove("is-copied"); + } + function render() { const operation = selected(form, "operation"); const agent = selected(form, "agent"); @@ -296,18 +320,25 @@ const agents = [ clearTimeout(resetCopyLabel); try { await navigator.clipboard.writeText(prompt); - if (status) status.textContent = "Prompt copied. Paste it into your agent and it takes over from there."; + if (status) status.textContent = "Prompt copied. Create a repository, then paste it into the starter text box."; if (copyLabel) copyLabel.textContent = "Copied"; copyButton.classList.add("is-copied"); - resetCopyLabel = setTimeout(() => { - if (copyLabel) copyLabel.textContent = "Copy prompt"; - copyButton.classList.remove("is-copied"); - }, 2400); + openCopyDialog(); + resetCopyLabel = setTimeout(resetCopyState, 2400); } catch { if (status) status.textContent = "Copy failed. Select the prompt text and copy it manually."; } }); + copyDialogClose?.addEventListener("click", () => copyDialog?.close()); + copyDialog?.addEventListener("close", () => { + clearTimeout(resetCopyLabel); + resetCopyState(); + }); + copyDialog?.addEventListener("click", (event) => { + if (event.target === copyDialog) copyDialog.close(); + }); + render(); }); } @@ -603,6 +634,53 @@ const agents = [ background: var(--sl-color-green); } + .copy-dialog { + max-width: min(26rem, calc(100% - 2rem)); + border: 1px solid color-mix(in srgb, var(--sl-color-text-accent) 50%, transparent); + border-radius: 0.875rem; + background: var(--sl-color-bg); + padding: 0; + color: var(--sl-color-white); + box-shadow: 0 1.5rem 4rem color-mix(in srgb, var(--sl-color-black) 55%, transparent); + } + + .copy-dialog::backdrop { + background: color-mix(in srgb, var(--sl-color-black) 65%, transparent); + } + + .copy-dialog-card { + display: flex; + flex-direction: column; + gap: 0.875rem; + padding: 1.25rem; + } + + .copy-dialog-card p { + margin: 0; + color: var(--sl-color-gray-2); + font-size: var(--sl-text-sm); + line-height: 1.6; + } + + .copy-dialog-card .copy-dialog-title { + color: var(--sl-color-white); + font-size: var(--sl-text-lg); + font-weight: 700; + line-height: 1.2; + } + + .copy-dialog-close { + align-self: flex-start; + border: 1px solid var(--sl-color-text-accent); + border-radius: 0.375rem; + background: var(--sl-color-text-accent); + padding: 0.35rem 0.9rem; + color: var(--sl-color-black); + font-size: var(--sl-text-xs); + font-weight: 600; + cursor: pointer; + } + @media (prefers-reduced-motion: reduce) { .option-card, .option-check,