Danny/connect oauth docs update (#14743)

* Adding info on OAuth client usage, more envs info

* Update pnpm-lock.yaml

Author: dannyroosevelt

docs-v2/pages/connect/environments.mdx

@@ -1,4 +1,5 @@
 import Callout from '@/components/Callout'
+import Image from 'next/image'
 
 # Environments
 
@@ -7,6 +8,14 @@ Pipedream Connect projects support two environments: `development` and `producti
 1. Connected accounts and credentials stored in `development` remain separate from `production`.
 2. In `development`, you can use the official Pipedream OAuth clients, so you can test integrations without creating your own OAuth client, and you can also use features that are typically only available on higher paid tiers, like [running workflows on behalf of your end users](/connect/workflows).
 
+<Callout type="warning">
+When connecting an account in `development`, make sure you're signed in to pipedream.com in the same browser where you're connecting your account. This is only a requirement for the `development` environment.
+</Callout>
+
+<br />
+
+<Image src="https://res.cloudinary.com/pipedreamin/image/upload/v1732654019/Google_Chrome_-_Pipedream_Connect_2024-11-26_at_12.45.06_PM_yp4gnl.png" alt="Connect in development mode" width={350} height={529} />
+
 ## How to specify environment
 
 You specify the environment when [creating a new Connect token](/connect/api/#create-a-new-token) with the Pipedream SDK or API. By default, the enviromment is set to `production`. When users succesfully connect their account, Pipedream saves it for that `external_user_id` in the specified environment.

docs-v2/pages/connect/oauth-clients.mdx

@@ -12,12 +12,20 @@ There are two types of apps in Pipedream:
 1. **Key-based**: These apps require static credentials, like API keys. Pipedream stores these credentials securely and exposes them via API.
 2. **OAuth**: These apps require OAuth authorization. Pipedream manages the OAuth flow for these apps, ensuring you always have a fresh access token for requests.
 
-**OAuth apps require you create your own OAuth client to [deploy Connect to production](/connect/environments):**
-
 <Callout type="info">
-To get started in [development mode](/connect/environments), you can skip these steps. To deploy your app to production, you'll need to [create an OAuth client](#using-a-custom-oauth-client) for the app you're integrating.
+For any OAuth app that supports it, **you can always use your own client.** Your ability to use Pipedream's OAuth clients in production depends on the use case.
 </Callout>
 
+<br />
+
+<div className="highlightHeaderRowTable">
+| Operation | Details | Environment |
+|--------|---------|------------------------------|
+| [Retrieve credentials via API](/connect/api#accounts) | Fetch the credentials for your end user from Pipedream's API to use in your application. | ✅ `development`<br />❌ `production` |
+| [Invoke workflows](/connect/workflows) | Trigger any Pipedream workflow and use the connected account of your end user | ✅ `development`<br />❌ `production` |
+| Run components via API (coming soon) | Run any action and deploy any trigger directly from your application | ✅ `development`<br />✅ `production` |
+</div>
+
 ## Using a custom OAuth client
 
 1. Follow the steps [here](/connected-accounts/oauth-clients#configuring-custom-oauth-clients) to create an OAuth client in Pipedream.

docs-v2/styles/globals.css

@@ -47,3 +47,11 @@ html.dark {
 .DocSearch input.DocSearch-Input:focus-visible {
   box-shadow: none;
 }
+
+.highlightHeaderRowTable th {
+  background-color: #f6f8fa;
+}
+
+.highlightHeaderRowTable td:last-child {
+  white-space: nowrap;
+}