Coolguyzone/feat/claude copilot agent skills

docs/ai/agent-skills/copilot.mdx

@@ -0,0 +1,51 @@
+---
+title: GitHub Copilot Agent Setup
+sidebar_order: 20
+description: "Set up the GitHub Copilot integration to send Sentry issues directly to Copilot agents for automated root cause analysis and fix generation."
+keywords:
+  - GitHub Copilot
+  - Copilot
+  - agent skills
+  - AI coding assistant
+  - integration
+---
+
+You can trigger GitHub Copilot agents from your [Seer Autofix](/product/ai-in-sentry/seer/autofix/) tab. The agent is provided with Seer's root cause analysis output and issue context, so it can understand the problem and generate a fix, including opening a pull request in GitHub.
+
+## Install and Configure
+
+<Alert>
+
+Sentry Owner, Manager, or Admin permissions are required to install this integration.
+
+</Alert>
+
+1. In Sentry, navigate to **Settings > Integrations** and search for **GitHub Copilot**.
+
+2. Click **Install**.
+
+<br />
+
+   <Arcade src="https://demo.arcade.software/d5AS2f3OiW6sIdDp9crY?embed&show_copy_link=true" width="65%" />
+
+## First-Time Authorization
+
+The first time you use the integration, you'll need to authorize Copilot from within a Sentry issue.
+
+1. Go to a Sentry issue and click **Start Root Cause Analysis**.
+
+2. Once root cause analysis completes, click **Set Up GitHub Copilot** in the Seer panel.
+
+3. Complete the authorization and redirect flow to connect your GitHub account.
+
+## Using the Integration
+
+Once authorized, you can send any Seer root cause analysis to a Copilot agent.
+
+1. On any Seer root cause analysis, open the dropdown and select **Send to GitHub Copilot**.
+
+
+2. A link to the Copilot agent run and any resulting pull request will appear in the Sentry UI. Click it to follow Copilot's progress and review the changes.
+
+<br />
+<Arcade src="https://demo.arcade.software/VD4hY2rxo3i42u3fXb3j?embed&show_copy_link=true" width="65%" />

src/components/arcade.tsx

@@ -1,30 +1,42 @@
 type ArcadeProps = {
   src: string;
+  /** Constrains the embed width (for example `640px` or `80%`). Defaults to full width of the content column. */
+  width?: string;
 };
-export function Arcade({src}: ArcadeProps) {
+
+export function Arcade({src, width}: ArcadeProps) {
   return (
     <div
       style={{
-        height: '0px',
-        paddingBottom: 'calc(56.8359% + 41px)',
-        position: 'relative',
-        width: '100%',
+        maxWidth: '100%',
+        width: width ?? '100%',
       }}
     >
-      <iframe
-        src={src}
-        loading="lazy"
-        allowFullScreen
-        allow="fullscreen;"
+      {/* Inner wrapper: % padding is relative to outer width so aspect ratio matches narrow embeds. */}
+      <div
         style={{
-          colorScheme: 'light',
-          height: '100%',
-          left: '0px',
-          position: 'absolute',
-          top: '0px',
+          height: '0px',
+          paddingBottom: 'calc(56.8359% + 41px)',
+          position: 'relative',
           width: '100%',
         }}
-      />
+      >
+        <iframe
+          src={src}
+          loading="lazy"
+          allowFullScreen
+          allow="fullscreen;"
+          style={{
+            border: 'none',
+            colorScheme: 'light',
+            height: '100%',
+            left: '0px',
+            position: 'absolute',
+            top: '0px',
+            width: '100%',
+          }}
+        />
+      </div>
     </div>
   );
 }