From 30ff360cca53f33688fa15e3160be310d16a535e Mon Sep 17 00:00:00 2001
From: Michael Ramos <mdramos8@gmail.com>
Date: Wed, 2 Sep 2026 11:55:31 -0700
Subject: [PATCH] feat(site): refine landing page agent setup

---
 apps/site/src/pages/index.astro  |  94 ++++-----
 apps/site/src/styles/landing.css | 317 +++++++++++--------------------
 2 files changed, 160 insertions(+), 251 deletions(-)

diff --git a/apps/site/src/pages/index.astro b/apps/site/src/pages/index.astro
index e5a47f2..691b1b7 100644
--- a/apps/site/src/pages/index.astro
+++ b/apps/site/src/pages/index.astro
@@ -33,6 +33,28 @@ const agents = [
   { name: "Pi", tier: "native", light: piLight.src, dark: piDark.src },
   { name: "OpenCode", tier: "native", light: opencodeLight.src, dark: opencodeDark.src },
 ];
+
+const setupPrompt = `Install and configure Artifact Server for me. Do the work, not only explain the steps.
+
+Use these pages as the source of truth:
+- https://artifactserver.com/docs/get-started/
+- https://artifactserver.com/docs/deploy/
+- https://artifactserver.com/docs/mcp/
+- https://artifactserver.com/docs/agents/
+
+First, ask me exactly one question: “Do you want to run Artifact Server locally on this machine, or deploy it for a team?” Wait for my answer before you continue.
+
+Then complete the matching setup:
+
+- Inspect the system before you make changes. Follow the current documentation and do not invent commands.
+- For a local setup, verify that Node.js 24.12 or later and pnpm 10.34.3 are available. Use the current source checkout when one exists. Otherwise, clone https://github.com/plannotator/artifact-server.git, install its dependencies, and run \`pnpm dev\`. Keep the server on loopback only and use the URL printed by the process.
+- For a team deployment, ask only for choices or credentials that are still missing. Explain the current qualification status of the available deployment targets. Follow the selected deployment guide, keep secrets out of source control, use HTTPS for the trusted application origin, configure an isolated wildcard content domain, and configure backups. Do not describe AWS or Google Cloud as live-qualified deployments.
+- Install the Artifact Server skill with \`npx skills add plannotator/artifact-server\`.
+- Connect this agent to Artifact Server through MCP as part of the setup. From a source checkout, run \`pnpm artifactserver connect --data .artifact-server\`. With an installed CLI, run \`artifactserver connect\`. For a team deployment, configure the exact HTTPS \`/mcp\` endpoint and complete browser authorization. Never print or paste bootstrap URLs, tokens, or credentials into chat.
+- Verify the server health, the review application, the installed skill, and MCP tool discovery. Fix failures that are within the setup scope.
+- Do not stop after producing a plan. Complete the setup unless you need a credential or a deployment choice from me.
+
+When the setup is complete, begin your final response with “Artifact Server is running at <URL>.” State whether it is local or deployed for a team, where its data is stored, whether the skill is installed, whether this agent is connected through MCP, and what you verified. Link to https://artifactserver.com/docs/ for operating guidance. If anything is incomplete, list the exact blocker instead of claiming success.`;
 ---
 
 <BaseLayout title="Artifact Server — open-source Claude Code artifacts" description={description} markdownUrl="/index.md">
@@ -66,21 +88,28 @@ const agents = [
               <Icon name="ph:cloud-arrow-up" />
             </a>
           </div>
-          <div class="landing-commands" aria-label="Install commands">
-            <p>
-              <code>artifactserver connect</code>
-              <a href="/docs/mcp/">connect your agent</a>
-              <button type="button" data-copy="artifactserver connect" aria-label="Copy the connect command">
-                <Icon name="ph:copy" /><Icon name="ph:check" />
-              </button>
-            </p>
-            <p>
-              <code>npx skills add plannotator/artifact-server</code>
-              <a href="/docs/mcp/#install-the-artifact-server-skill">install the skill</a>
-              <button type="button" data-copy="npx skills add plannotator/artifact-server" aria-label="Copy the skill install command">
+          <div class="landing-agent-setup" aria-label="Set up Artifact Server with an AI coding agent">
+            <button type="button" class="landing-copy-prompt" data-copy={setupPrompt} aria-label="Copy the Artifact Server setup prompt">
+              <span class="landing-agent-setup__marks" aria-hidden="true">
+                {agents.map((agent) => (
+                  <span title={agent.name}>
+                    <img src={agent.light} alt="" class="theme-light" />
+                    <img src={agent.dark} alt="" class="theme-dark" />
+                  </span>
+                ))}
+              </span>
+              <span class="landing-copy-prompt__label" aria-live="polite">
+                <span>Copy prompt</span>
+                <span>Copied</span>
+              </span>
+              <span class="landing-copy-prompt__icon" aria-hidden="true">
                 <Icon name="ph:copy" /><Icon name="ph:check" />
-              </button>
-            </p>
+              </span>
+            </button>
+            <a class="landing-agent-setup__docs" href="/docs/mcp/">
+              Connect MCP
+              <Icon name="ph:arrow-right" />
+            </a>
           </div>
         </div>
 
@@ -150,7 +179,7 @@ const agents = [
         <header class="landing-section-heading">
           <p>Why Artifact Server</p>
           <div>
-            <h2 id="principles-title">Own your team's development process outputs</h2>
+            <h2 id="principles-title">Own your team's SDLC outputs</h2>
             <p class="landing-section-lede">
               Product teams create plans, mockups, prototypes, and code reviews as HTML,
               images, and video. These files often end up scattered across tools.
@@ -162,7 +191,7 @@ const agents = [
           <article>
             <span>01</span>
             <Icon name="ph:upload-simple" />
-            <h3>Publish from where the work happens.</h3>
+            <h3>Integrated with Agents</h3>
             <p>Agents publish through MCP or the Agent Skill. People use the CLI or browser. Each upload can contain one file or a complete site.</p>
             <code>/artifact-server upload that HTML design doc</code>
           </article>
@@ -234,33 +263,6 @@ const agents = [
         </figure>
       </section>
 
-      <section class="landing-boundary" aria-labelledby="boundary-title">
-        <div class="landing-boundary__copy">
-          <p class="landing-eyebrow"><span></span>Security model</p>
-          <h2 id="boundary-title">Untrusted artifacts stay isolated.</h2>
-          <p>
-            Artifact Server serves untrusted content from an isolated host for each
-            version. The trusted application host handles authentication, metadata,
-            comments, the API, and MCP. Private content uses browser sessions scoped to
-            one version. Untrusted paths cannot select storage locations.
-          </p>
-          <a href="/docs/concepts/security-boundary/">Understand the two-origin model <Icon name="ph:arrow-right" /></a>
-        </div>
-        <div class="boundary-diagram" role="img" aria-label="Trusted Artifact Server application connected to an isolated artifact content origin">
-          <article>
-            <small>TRUSTED ORIGIN</small>
-            <strong>Artifact Server</strong>
-            <span>Identity · versions · comments · MCP</span>
-          </article>
-          <div><span>exact version</span><i></i><span>sandboxed view</span></div>
-          <article>
-            <small>CONTENT ORIGIN</small>
-            <strong>Your artifact</strong>
-            <span>HTML · images · video</span>
-          </article>
-        </div>
-      </section>
-
       <section class="landing-deploy" aria-labelledby="deploy-title">
         <header class="landing-section-heading">
           <p>Yours to run</p>
@@ -330,16 +332,18 @@ const agents = [
 </BaseLayout>
 
 <script>
-  // Copy buttons on the hero commands. Progressive: without clipboard access
-  // the button does nothing and the command text is still selectable.
+  // Clipboard failure leaves the action unchanged so the page never reports
+  // a false success.
   for (const button of document.querySelectorAll<HTMLButtonElement>("[data-copy]")) {
     button.addEventListener("click", async () => {
       const text = button.dataset.copy ?? "";
       try {
         await navigator.clipboard.writeText(text);
         button.dataset.copied = "true";
+        button.setAttribute("aria-label", "Artifact Server setup prompt copied");
         window.setTimeout(() => {
           delete button.dataset.copied;
+          button.setAttribute("aria-label", "Copy the Artifact Server setup prompt");
         }, 1600);
       } catch {
         // Clipboard unavailable (insecure context or permission denied).
diff --git a/apps/site/src/styles/landing.css b/apps/site/src/styles/landing.css
index 8ab4cbc..5537f66 100644
--- a/apps/site/src/styles/landing.css
+++ b/apps/site/src/styles/landing.css
@@ -89,7 +89,6 @@
 .landing-hero,
 .landing-principles,
 .landing-loop,
-.landing-boundary,
 .landing-deploy,
 .landing-close {
   width: min(100%, var(--landing-rail));
@@ -233,84 +232,113 @@
   }
 }
 
-.landing-commands {
-  display: grid;
-  max-width: 32rem;
+.landing-agent-setup {
+  display: flex;
+  max-width: 36rem;
   margin-top: 1.25rem;
-  border: 1px solid var(--nb-border);
-  background: var(--nb-card);
-  font-family: var(--nb-font-mono);
-  font-size: 0.6875rem;
+  gap: 0.75rem;
 }
 
-.landing-commands p {
+.landing-copy-prompt,
+.landing-agent-setup__docs {
   display: flex;
+  min-height: 3.25rem;
   align-items: center;
-  gap: 0.75rem;
-  padding: 0.5rem 0.5rem 0.5rem 1rem;
-}
-
-.landing-commands p + p {
-  border-top: 1px solid var(--nb-border);
-}
-
-.landing-commands code {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
+  justify-content: center;
+  border: 1px solid var(--nb-border-strong);
+  background: color-mix(in oklch, var(--nb-card) 92%, transparent);
   color: var(--nb-foreground);
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  text-decoration: none;
+  transition:
+    border-color 150ms ease,
+    background 150ms ease,
+    color 150ms ease,
+    transform 150ms ease;
 }
 
-.landing-commands a {
-  flex: none;
-  color: var(--nb-muted-foreground);
-  text-decoration: none;
-  transition: color 150ms ease;
+.landing-copy-prompt {
+  min-width: 0;
+  flex: 1 1 auto;
+  gap: 0.875rem;
+  padding: 0.75rem 0.875rem;
+  font: inherit;
+  cursor: pointer;
 }
 
-.landing-commands a:hover {
-  color: var(--nb-primary);
+.landing-agent-setup__marks {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 0.4375rem;
 }
 
-.landing-commands button {
+.landing-agent-setup__marks > span {
   display: grid;
-  width: 2rem;
-  height: 2rem;
-  flex: none;
+  width: 1.25rem;
+  height: 1.25rem;
   place-items: center;
-  border: 1px solid var(--nb-border);
-  background: transparent;
-  color: var(--nb-muted-foreground);
-  cursor: pointer;
-  transition:
-    border-color 150ms ease,
-    color 150ms ease;
 }
 
-.landing-commands button:hover {
-  border-color: var(--nb-foreground);
-  color: var(--nb-foreground);
+.landing-agent-setup__marks img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
 }
 
-.landing-commands button svg {
-  width: 0.875rem;
-  height: 0.875rem;
+.landing-copy-prompt__label {
+  min-width: 5.75rem;
+  font-size: 0.875rem;
+  font-weight: 650;
+  text-align: left;
+  white-space: nowrap;
 }
 
-.landing-commands button svg:last-child,
-.landing-commands button[data-copied] svg:first-child {
+.landing-copy-prompt__label span:last-child,
+.landing-copy-prompt[data-copied] .landing-copy-prompt__label span:first-child,
+.landing-copy-prompt__icon svg:last-child,
+.landing-copy-prompt[data-copied] .landing-copy-prompt__icon svg:first-child {
   display: none;
 }
 
-.landing-commands button[data-copied] {
-  border-color: var(--nb-success);
+.landing-copy-prompt[data-copied] .landing-copy-prompt__label span:last-child,
+.landing-copy-prompt[data-copied] .landing-copy-prompt__icon svg:last-child {
+  display: block;
+}
+
+.landing-copy-prompt[data-copied] {
+  border-color: color-mix(in oklch, var(--nb-success) 70%, var(--nb-border));
   color: var(--nb-success);
 }
 
-.landing-commands button[data-copied] svg:last-child {
-  display: block;
+.landing-copy-prompt__icon,
+.landing-agent-setup__docs svg {
+  display: grid;
+  width: 1rem;
+  height: 1rem;
+  flex: none;
+  place-items: center;
+}
+
+.landing-agent-setup__docs {
+  flex: none;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  font-size: 0.8125rem;
+  font-weight: 650;
+  white-space: nowrap;
+}
+
+.landing-copy-prompt:active,
+.landing-agent-setup__docs:active {
+  transform: scale(0.96);
+}
+
+@media (hover: hover) {
+  .landing-copy-prompt:hover,
+  .landing-agent-setup__docs:hover {
+    border-color: var(--nb-foreground);
+    background: var(--nb-muted);
+  }
 }
 
 /* Hero: the full-screen review — artifact canvas plus the open comment panel. */
@@ -1059,125 +1087,6 @@
   font-size: 0.625rem;
 }
 
-.landing-boundary {
-  display: grid;
-  min-height: 42rem;
-  grid-template-columns: minmax(18rem, 0.85fr) minmax(30rem, 1.15fr);
-  align-items: center;
-  gap: clamp(3rem, 7vw, 7rem);
-  padding: clamp(4.5rem, 8vw, 7rem) clamp(1.5rem, 4vw, 4rem);
-  border-bottom: 1px solid var(--nb-border);
-  background: var(--nb-card);
-}
-
-.landing-boundary__copy h2 {
-  max-width: 13ch;
-  margin-top: 1.5rem;
-  font-size: clamp(2.5rem, 4.3vw, 4.4rem);
-  font-weight: 600;
-  letter-spacing: -0.055em;
-  line-height: 0.98;
-}
-
-.landing-boundary__copy > p:not(.landing-eyebrow) {
-  max-width: 48ch;
-  margin-top: 1.5rem;
-  color: var(--nb-muted-foreground);
-  line-height: 1.65;
-}
-
-.landing-boundary__copy > a {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-top: 1.5rem;
-  color: var(--nb-primary);
-  font-size: 0.875rem;
-  font-weight: 600;
-  text-decoration: none;
-}
-
-.landing-boundary__copy > a svg {
-  width: 1rem;
-}
-
-.boundary-diagram {
-  display: grid;
-  grid-template-columns: minmax(9rem, 1fr) minmax(8rem, 0.75fr) minmax(9rem, 1fr);
-  align-items: center;
-}
-
-.boundary-diagram article {
-  display: grid;
-  min-height: 15rem;
-  align-content: center;
-  gap: 0.75rem;
-  padding: 1.5rem;
-  border: 1px solid var(--nb-border-strong);
-  background: var(--nb-background);
-}
-
-.boundary-diagram article:last-child {
-  background: var(--nb-primary);
-  color: var(--nb-primary-foreground);
-}
-
-.boundary-diagram small {
-  font-family: var(--nb-font-mono);
-  font-size: 0.5625rem;
-  letter-spacing: 0.1em;
-}
-
-.boundary-diagram strong {
-  font-size: 1.25rem;
-}
-
-.boundary-diagram article span {
-  color: var(--nb-muted-foreground);
-  font-size: 0.75rem;
-}
-
-.boundary-diagram article:last-child span {
-  color: color-mix(in oklch, var(--nb-primary-foreground) 72%, transparent);
-}
-
-.boundary-diagram > div {
-  display: grid;
-  justify-items: center;
-  gap: 0.75rem;
-  color: var(--nb-muted-foreground);
-  font-family: var(--nb-font-mono);
-  font-size: 0.5625rem;
-  text-align: center;
-}
-
-.boundary-diagram > div i {
-  position: relative;
-  display: block;
-  width: 100%;
-  height: 1px;
-  background: var(--nb-border-strong);
-}
-
-.boundary-diagram > div i::before,
-.boundary-diagram > div i::after {
-  position: absolute;
-  top: 50%;
-  width: 0.4rem;
-  height: 0.4rem;
-  background: var(--nb-primary);
-  content: "";
-  transform: translateY(-50%);
-}
-
-.boundary-diagram > div i::before {
-  left: 0;
-}
-
-.boundary-diagram > div i::after {
-  right: 0;
-}
-
 .landing-deploy__grid article {
   min-height: 18rem;
 }
@@ -1285,12 +1194,10 @@
     width: 100%;
   }
 
-  .landing-boundary,
   .landing-loop {
     grid-template-columns: 1fr;
   }
 
-  .landing-boundary__copy,
   .landing-loop__copy {
     max-width: 45rem;
   }
@@ -1300,7 +1207,6 @@
   .landing-hero,
   .landing-principles,
   .landing-loop,
-  .landing-boundary,
   .landing-deploy,
   .landing-close {
     border-inline: 0;
@@ -1349,12 +1255,38 @@
     font-size: clamp(2.4rem, 11.5vw, 3.6rem);
   }
 
-  .landing-commands p {
-    align-items: flex-start;
+  .landing-agent-setup {
+    align-items: stretch;
     flex-direction: column;
+  }
+
+  .landing-copy-prompt {
+    justify-content: flex-start;
+    gap: 0.625rem;
+    padding-inline: 0.625rem;
+  }
+
+  .landing-agent-setup__marks {
+    flex: 1 1 auto;
     gap: 0.25rem;
   }
 
+  .landing-agent-setup__marks > span {
+    width: 1rem;
+    height: 1rem;
+    flex: none;
+  }
+
+  .landing-copy-prompt__label {
+    min-width: auto;
+    font-size: 0.8125rem;
+  }
+
+  .landing-copy-prompt__icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+
   .artifact-window {
     height: 30rem;
     box-shadow: 0.75rem 0.75rem 0 color-mix(in oklch, var(--nb-primary) 12%, transparent);
@@ -1368,8 +1300,8 @@
     grid-template-columns: 1fr;
   }
 
-  .landing-commands p {
-    flex-wrap: wrap;
+  .landing-agent-setup__docs {
+    align-self: flex-start;
   }
 
   .artifact-canvas {
@@ -1380,33 +1312,6 @@
     box-shadow: 0.75rem 0.75rem 0 color-mix(in oklch, var(--nb-primary) 12%, transparent);
   }
 
-  .boundary-diagram {
-    grid-template-columns: 1fr;
-  }
-
-  .boundary-diagram > div {
-    min-height: 6rem;
-    align-content: center;
-  }
-
-  .boundary-diagram > div i {
-    width: 1px;
-    height: 3rem;
-  }
-
-  .boundary-diagram > div i::before,
-  .boundary-diagram > div i::after {
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  .boundary-diagram > div i::before {
-    top: 0;
-  }
-
-  .boundary-diagram > div i::after {
-    top: 100%;
-  }
 }
 
 @media (prefers-reduced-motion: reduce) {