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 = [
+
@@ -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,