From 82615220c40a0a37845e3e3e7d3c40388947594a Mon Sep 17 00:00:00 2001
From: Aaron Powell <me@aaron-powell.com>
Date: Mon, 17 Aug 2026 14:45:42 +1000
Subject: [PATCH] feat(website): make Copilot app deep link the default plugin
 install

Plugin detail pages exposed only a copyable CLI command. They now lead
with a ghapp://plugins/install deep link in the same split-button
ActionMenu the other detail pages use, keeping the CLI command available
as a Copy action in the menu.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 80686fef-efe3-4cdd-8cd6-bfa61a5d0af6
---
 website/src/components/brand/PluginDetail.tsx | 45 ++++++++++++-------
 website/src/pages/plugin/[id].astro           |  8 ++++
 2 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/website/src/components/brand/PluginDetail.tsx b/website/src/components/brand/PluginDetail.tsx
index bd018818..66b205fe 100644
--- a/website/src/components/brand/PluginDetail.tsx
+++ b/website/src/components/brand/PluginDetail.tsx
@@ -1,7 +1,8 @@
-import { CheckIcon, CopyIcon, MarkGithubIcon } from "@primer/octicons-react";
+import { MarkGithubIcon, PlusIcon } from "@primer/octicons-react";
 import React from "react";
 
 import {
+  ActionMenu,
   Box,
   Button,
   Card,
@@ -19,7 +20,6 @@ import { DetailChassis, type DetailSibling } from "./DetailChassis";
 import { ResourceMeta } from "./ResourceMeta";
 import { pageHref } from "./pageHref";
 import type { SearchItem } from "./searchIndex";
-import installStyles from "./styles/github-copilot-app.module.css";
 import gridStyles from "./styles/plugins.module.css";
 import styles from "./styles/dotnet-upgrade.module.css";
 
@@ -57,6 +57,8 @@ export type PluginDetailProps = {
   githubUrl: string;
   /** Copilot CLI command that installs this plugin. */
   installCommand: string;
+  /** `ghapp://` deep link that installs this plugin into the Copilot app. */
+  appInstallUrl: string;
   lastUpdated?: string | null;
   previous?: DetailSibling;
   next?: DetailSibling;
@@ -93,14 +95,16 @@ function itemTitle(item: PluginIncludedItem): string {
  *
  * Differs from the other resource detail pages in three ways: the plugin's
  * bundled contents are rendered as a card grid linking to each item's own
- * detail page, installation is a copyable Copilot CLI command rather than a
- * VS Code deep link, and externally-hosted plugins carry provenance badges.
+ * detail page, installation deep-links into the Copilot app (with the CLI
+ * command offered as a secondary path), and externally-hosted plugins carry
+ * provenance badges.
  */
 export function PluginDetail({
   item,
   markdownHtml,
   githubUrl,
   installCommand,
+  appInstallUrl,
   lastUpdated,
   previous,
   next,
@@ -132,22 +136,29 @@ export function PluginDetail({
   const includedItems = item.items ?? [];
   const hasContents = includedItems.length > 0;
 
+  // Installing straight into the Copilot app is the primary path, so it is the
+  // split button's default action. The CLI command stays available behind the
+  // menu for people working in a terminal or on a machine without the app.
   const install = (
     <>
-      <div className={installStyles.installBar}>
-        <code className={installStyles.installCommand} tabIndex={0}>
-          {installCommand}
-        </code>
-        <button
-          type="button"
-          className={installStyles.installCopy}
-          onClick={handleCopy}
-          aria-label={copied ? "Copied to clipboard" : "Copy install command"}
+      <ActionMenu mode="split-button" menuAlignment="start">
+        <ActionMenu.Button
+          as="a"
+          href={appInstallUrl}
+          variant="primary"
+          leadingVisual={PlusIcon}
         >
-          {copied ? <CheckIcon size={16} /> : <CopyIcon size={16} />}
-          <span>{copied ? "Copied" : "Copy"}</span>
-        </button>
-      </div>
+          Install
+        </ActionMenu.Button>
+        <ActionMenu.Overlay aria-label={`Install the ${item.name} plugin`}>
+          <ActionMenu.Item as="a" href={appInstallUrl}>
+            Install in Copilot app
+          </ActionMenu.Item>
+          <ActionMenu.Item onClick={handleCopy}>
+            {copied ? "Copied CLI command" : "Copy CLI install command"}
+          </ActionMenu.Item>
+        </ActionMenu.Overlay>
+      </ActionMenu>
       <Button
         as="a"
         href={githubUrl}
diff --git a/website/src/pages/plugin/[id].astro b/website/src/pages/plugin/[id].astro
index e0207710..60a1d6e7 100644
--- a/website/src/pages/plugin/[id].astro
+++ b/website/src/pages/plugin/[id].astro
@@ -69,6 +69,13 @@ const githubUrl = item.external
 
 const installCommand = `copilot plugin install ${item.id}@awesome-copilot`;
 
+// Deep link handled by the Copilot app's `ghapp://` protocol handler. The
+// marketplace-qualified source is encoded because the `@` separator is not
+// safe unescaped in a query value.
+const appInstallUrl = `ghapp://plugins/install?source=${encodeURIComponent(
+  `${item.id}@awesome-copilot`,
+)}`;
+
 const lastUpdated = formatLastUpdated(item.lastUpdated);
 
 const base = import.meta.env.BASE_URL ?? "/";
@@ -92,6 +99,7 @@ const siblingOf = (sibling?: PluginItem) =>
     markdownHtml={html}
     githubUrl={githubUrl}
     installCommand={installCommand}
+    appInstallUrl={appInstallUrl}
     lastUpdated={lastUpdated}
     previous={siblingOf(previous)}
     next={siblingOf(next)}