docs: present agent and team collaboration

README.md

@@ -17,7 +17,7 @@ Run it on a laptop for one developer. Deploy it for a private team on Cloudflare
 ## Contents
 
 - [Why Artifact Server](#why-artifact-server)
-- [Built for AI agents](#built-for-ai-agents)
+- [Built for AI agents and team collaboration](#built-for-ai-agents-and-team-collaboration)
 - [Cloudflare and Artifact Server](#cloudflare-and-artifact-server)
 - [Deploy it for a team](#deploy-it-for-a-team)
 - [Run it locally](#run-it-locally)
@@ -31,7 +31,7 @@ Teams now use HTML, images, and video for plans, mockups, prototypes, code revie
 
 Artifact Server gives teams a self-hosted place to organize and collaborate on that work. Store artifacts by project, share them, comment on them, and keep control of the files and data.
 
-## Built for AI agents
+## Built for AI agents and team collaboration
 
 <p>
   <img src="./apps/web/src/review/assets/agents/claude.svg" alt="Claude" width="30" height="30">
@@ -62,9 +62,13 @@ Artifact Server gives teams a self-hosted place to organize and collaborate on t
   </picture>
 </p>
 
-<a href="./docs/mcp.md"><img src="./docs/assets/agent-native-mcp.svg" alt="AI agents connect to Artifact Server through its built-in MCP server" width="800"></a>
+<p align="center">
+  <a href="./docs/mcp.md"><img src="./docs/assets/agent-native-mcp.svg" alt="AI agents connect to Artifact Server through its built-in MCP server" width="395"></a>
+  &nbsp;&nbsp;
+  <img src="./docs/assets/team-collaboration.svg" alt="Team members add comments to exact artifact versions" width="395">
+</p>
 
-Artifact Server includes a built-in MCP server and a portable Agent Skill. Agents can publish, organize, review, comment on, and share versioned artifacts.
+Artifact Server includes a built-in MCP server and a portable Agent Skill. Agents publish and update versioned artifacts. Teams review, comment on, and share the same work.
 
 Connect the agent and install the skill:
 
@@ -81,13 +85,21 @@ Then ask:
 
 The agent returns the full-screen review link first. [Read the MCP guide](./docs/mcp.md) for source checkouts, remote servers, permissions, and supported operations.
 
-<a href="./integrations/pi/README.md"><img src="./docs/assets/pi-live-feedback.svg" alt="Artifact Server has first-class Pi support through a live feedback extension" width="500"></a>
+Live session delivery is available from source for Pi and Claude Code Channels. Claude Channels require its research-preview development flag and, on managed plans, the organization policy. The OpenCode adapter is not release-qualified; live-host verification and contributions are welcome.
+
+<p align="center">
+  <a href="./integrations/pi/README.md"><img src="./docs/assets/pi-live-feedback.svg" alt="Artifact Server has native Pi support for live integrated feedback" width="268"></a>
+  <a href="./integrations/claude-channel/README.md"><img src="./docs/assets/claude-channel-feedback.svg" alt="Artifact Server supports live feedback through the Claude Code Channels research preview" width="268"></a>
+  <a href="./integrations/opencode/README.md"><img src="./docs/assets/opencode-plugin-wanted.svg" alt="OpenCode live-host verification, features, and pull requests are welcome" width="268"></a>
+</p>
 
 ## Cloudflare and Artifact Server
 
 Cloudflare is the main hosted deployment target. Cloudflare Artifacts can add private Git-backed history for selected projects. It is off by default and currently requires closed beta access.
 
-<a href="./docs/cloudflare-artifacts.md"><img src="./docs/assets/cloudflare-artifacts-git-handoff.svg" alt="Cloudflare Artifacts provides optional Git-backed history" width="800"></a>
+<p align="center">
+  <a href="./docs/cloudflare-artifacts.md"><img src="./docs/assets/cloudflare-artifacts-git-handoff.svg" alt="Cloudflare Artifacts provides optional Git-backed history" width="800"></a>
+</p>
 
 - [Deploy Artifact Server on Cloudflare](./deploy/cloudflare/README.md)
 - [Configure optional Git history](./docs/cloudflare-artifacts.md)

apps/site/src/pages/index.astro

@@ -90,8 +90,16 @@ When the setup is complete, begin your final response with “Artifact Server is
               <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" />
+                    <img
+                      src={agent.light}
+                      alt=""
+                      class:list={["theme-light", { "agent-logo--opencode": agent.name === "OpenCode" }]}
+                    />
+                    <img
+                      src={agent.dark}
+                      alt=""
+                      class:list={["theme-dark", { "agent-logo--opencode": agent.name === "OpenCode" }]}
+                    />
                   </span>
                 ))}
               </span>
@@ -103,20 +111,6 @@ When the setup is complete, begin your final response with “Artifact Server is
                 <Icon name="ph:copy" /><Icon name="ph:check" />
               </span>
             </button>
-            <div class="landing-manual-command" aria-label="Manual agent skill installation">
-              <code>npx skills add plannotator/artifact-server</code>
-              <a href="/docs/mcp/#install-the-artifact-server-skill">Install manually</a>
-              <button
-                type="button"
-                class="landing-copy-icon-button"
-                data-copy="npx skills add plannotator/artifact-server"
-                data-copy-label="Copy the agent skill install command"
-                data-copy-success-label="Agent skill install command copied"
-                aria-label="Copy the agent skill install command"
-              >
-                <Icon name="ph:copy" /><Icon name="ph:check" />
-              </button>
-            </div>
           </div>
           <div class="landing-actions">
             <a class="landing-button landing-button--primary" href="/docs/get-started/">
@@ -243,8 +237,16 @@ When the setup is complete, begin your final response with “Artifact Server is
           <ul class="landing-loop__agents" aria-label="Supported agents">
             {agents.map((agent) => (
               <li title={`${agent.name} · ${agent.tier}`}>
-                <img alt="" src={agent.light} class="theme-light" />
-                <img alt="" src={agent.dark} class="theme-dark" />
+                <img
+                  alt=""
+                  src={agent.light}
+                  class:list={["theme-light", { "agent-logo--opencode": agent.name === "OpenCode" }]}
+                />
+                <img
+                  alt=""
+                  src={agent.dark}
+                  class:list={["theme-dark", { "agent-logo--opencode": agent.name === "OpenCode" }]}
+                />
                 <span>{agent.name}</span>
               </li>
             ))}

apps/site/src/styles/landing.css

@@ -285,10 +285,11 @@
 
 .landing-copy-prompt__label {
   min-width: 0;
-  flex: 1;
+  flex: none;
+  margin-inline-start: auto;
   font-size: 0.875rem;
   font-weight: 650;
-  text-align: left;
+  text-align: end;
   white-space: nowrap;
 }
 
@@ -317,70 +318,7 @@
   place-items: center;
 }
 
-.landing-manual-command {
-  display: grid;
-  min-height: 2.75rem;
-  grid-template-columns: minmax(0, 1fr) auto 2rem;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.375rem 0.375rem 0.375rem 0.875rem;
-  border: 1px solid var(--nb-border);
-  background: var(--nb-card);
-  font-family: var(--nb-font-mono);
-  font-size: 0.6875rem;
-}
-
-.landing-manual-command code {
-  min-width: 0;
-  overflow: hidden;
-  color: var(--nb-foreground);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.landing-manual-command a {
-  color: var(--nb-muted-foreground);
-  text-decoration: none;
-  white-space: nowrap;
-  transition: color 150ms ease;
-}
-
-.landing-copy-icon-button {
-  display: grid;
-  width: 2rem;
-  height: 2rem;
-  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,
-    transform 150ms ease;
-}
-
-.landing-copy-icon-button svg {
-  width: 0.875rem;
-  height: 0.875rem;
-}
-
-.landing-copy-icon-button svg:last-child,
-.landing-copy-icon-button[data-copied] svg:first-child {
-  display: none;
-}
-
-.landing-copy-icon-button[data-copied] {
-  border-color: color-mix(in oklch, var(--nb-success) 70%, var(--nb-border));
-  color: var(--nb-success);
-}
-
-.landing-copy-icon-button[data-copied] svg:last-child {
-  display: block;
-}
-
-.landing-copy-prompt:active,
-.landing-copy-icon-button:active {
+.landing-copy-prompt:active {
   transform: scale(0.96);
 }
 
@@ -390,14 +328,6 @@
     background: var(--nb-muted);
   }
 
-  .landing-manual-command a:hover,
-  .landing-copy-icon-button:hover {
-    color: var(--nb-foreground);
-  }
-
-  .landing-copy-icon-button:hover {
-    border-color: var(--nb-foreground);
-  }
 }
 
 /* Hero: the full-screen review — artifact canvas plus the open comment panel. */
@@ -949,6 +879,16 @@
   object-fit: contain;
 }
 
+.landing-agent-setup__marks img.agent-logo--opencode {
+  width: 0.8rem;
+  height: 1rem;
+}
+
+.landing-loop__agents img.agent-logo--opencode {
+  width: 0.7rem;
+  height: 0.875rem;
+}
+
 .landing-shell .theme-dark {
   display: none;
 }
@@ -1339,28 +1279,21 @@
   }
 
   .landing-copy-prompt__label {
-    grid-column: 1 / -1;
+    grid-column: 1;
     grid-row: 2;
     min-width: auto;
+    justify-self: end;
     font-size: 0.8125rem;
+    text-align: end;
   }
 
   .landing-copy-prompt__icon {
     grid-column: 2;
-    grid-row: 1;
+    grid-row: 2;
     width: 0.875rem;
     height: 0.875rem;
   }
 
-  .landing-manual-command {
-    grid-template-columns: minmax(0, 1fr) 2rem;
-  }
-
-  .landing-manual-command a {
-    grid-column: 1 / -1;
-    grid-row: 2;
-  }
-
   .artifact-window {
     display: none;
   }