docs(integrations): rewrite the Integrations guide for the sidebar flow

Integrations moved out of Settings to a top-level sidebar page. Rewrote the
guide to the current journey: the Integrations page (Connected/Featured/search),
service pages with one-click skills and templates, + Add to Sim -> connect
dialog (display name + permissions) -> provider OAuth. Replaced the four
Settings-era screenshots with current captures (connect dialog illustrated via
HubSpot); block-side screenshots (account selector, manual credential ID) kept;
one VISUAL marker for the connection detail view pending a fresh capture.
Members/roles, credential-ID, reconnect/disconnect, email polling, and FAQ
substance unchanged apart from navigation.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: ouiliame

apps/docs/content/docs/en/integrations/index.mdx

@@ -8,79 +8,74 @@ import { Callout } from 'fumadocs-ui/components/callout'
 import { Image } from '@/components/ui/image'
 import { FAQ } from '@/components/ui/faq'
 
-Integrations are authenticated connections to third-party services like Gmail, Slack, GitHub, Dropbox, and more. Sim handles the OAuth flow, token storage, and automatic token refresh — you connect once and select the account in any block that needs it.
+Integrations are authenticated connections to third-party services like Gmail, Slack, GitHub, and HubSpot. Sim handles the OAuth flow, token storage, and automatic token refresh — you connect once and select the account in any block that needs it.
 
 You can connect **multiple accounts per service** — for example, two separate Gmail accounts for different workflows.
 
-## Managing Integrations
+## The Integrations page
 
-To manage integrations, open your workspace **Settings** and navigate to the **Integrations** tab.
+Click **Integrations** in the workspace sidebar. The page shows your **Connected** accounts, a **Featured** list, and a search box covering every available service.
 
 <Image
-  src="/static/integrations/integrations-list.png"
-  alt="Integrations tab showing connected accounts with service icons, names, and Details/Disconnect buttons"
-  width={700}
-  height={500}
+  src="/static/integrations/hubspot/integrations-page.png"
+  alt="The Integrations page showing the sidebar entry, search, connected accounts, and featured integrations"
+  width={800}
+  height={664}
 />
 
-The list shows all your connected accounts with the service icon, display name, and provider. Each entry has a **Details** button and a **Disconnect** button.
-
-## Connecting an Account
+Open a service to see what it offers:
 
-Click **+ Connect** in the top right to open the connection modal.
+- **Skills** — ready-made capabilities you add with one click, like *upsert-contact* for HubSpot.
+- **Templates** — starter workflows built around the service.
+- **+ Add to Sim** — connects your account.
 
 <Image
-  src="/static/integrations/connect-service-picker.png"
-  alt="Connect Integration modal showing a searchable list of available services"
-  width={500}
-  height={400}
+  src="/static/integrations/hubspot/hubspot-page-add-to-sim.png"
+  alt="A service page (HubSpot) with its skills, templates, and the Add to Sim button"
+  width={800}
+  height={550}
 />
 
-Search for or select the service you want to connect, then fill in the connection details:
+## Connecting an account
+
+1. Open the service's page and click **+ Add to Sim**.
+2. Enter a **Display name** to identify this connection (e.g. "Work Gmail" or "Sales HubSpot"), and optionally a **Description**.
+3. Review the **Permissions requested** — these are the scopes Sim will ask the provider for.
+4. Click **Connect** and complete the provider's sign-in and approval flow.
 
 <Image
-  src="/static/integrations/connect-modal.png"
-  alt="Connect Gmail modal showing permissions requested, display name field, and description field"
-  width={500}
-  height={450}
+  src="/static/integrations/hubspot/connect-hubspot-modal.png"
+  alt="The connect dialog (HubSpot shown) with display name, description, and the permissions requested"
+  width={700}
+  height={708}
 />
 
-1. Review the **Permissions requested** — these are the scopes Sim will request from the provider
-2. Enter a **Display name** to identify this connection (e.g. "Work Gmail" or "Marketing Slack")
-3. Optionally add a **Description**
-4. Click **Connect** and complete the authorization flow
+When the provider redirects you back, the connection appears under **Connected**.
 
-## Using Integrations in Workflows
+## Using integrations in workflows
 
-Blocks that require authentication (e.g. Gmail, Slack, Google Sheets) display a credential selector. Select the connected account you want that block to use.
+Blocks that require authentication (e.g. Gmail, Slack, HubSpot) display an account selector. Select the connected account you want that block to use.
 
 <Image
   src="/static/credentials/oauth-selector.png"
-  alt="Gmail block showing the account selector dropdown with connected accounts"
+  alt="A block showing the account selector dropdown with connected accounts"
   width={500}
   height={350}
 />
 
-You can also connect additional accounts directly from the block by selecting **Connect another [service] account** at the bottom of the dropdown.
+You can also connect another account directly from the block by selecting **Connect another [service] account** at the bottom of the dropdown.
 
 <Callout type="info">
 If a block requires an integration and none is selected, the workflow will fail at that step.
 </Callout>
 
-## Using a Credential ID
-
-Each integration has a unique credential ID you can use to reference it dynamically. This is useful when you have multiple accounts for the same service and want to switch between them programmatically — for example, routing different workflow runs to different Gmail accounts based on a variable.
+## Using a credential ID
 
-To copy a credential ID, open **Details** on any integration and click the clipboard icon next to the Display Name.
+Each connection has a unique credential ID you can use to reference it dynamically. This is useful when you have multiple accounts for the same service and want to switch between them programmatically — for example, routing different workflow runs to different Gmail accounts based on a variable.
 
-<Image
-  src="/static/integrations/copy-credential-id.png"
-  alt="Integration details showing the Copy credential ID tooltip on the clipboard icon next to the Display Name"
-  width={700}
-  height={150}
-/>
+To copy a credential ID, open the connection from the **Connected** list and use the copy control next to its name.
 
-In any block that requires an integration, click **Switch to manual ID** next to the credential selector to switch from the dropdown to a text field.
+In any block that requires an integration, click **Switch to manual ID** next to the account selector to switch from the dropdown to a text field.
 
 <Image
   src="/static/integrations/switch-to-manual-id.png"
@@ -98,39 +93,21 @@ Paste or reference the credential ID in that field. You can use a `{{SECRET}}` r
   height={200}
 />
 
-## Integration Details
+## Managing a connection
 
-Click **Details** on any integration to open its detail view.
+Open a connection from the **Connected** list to manage it:
 
-<Image
-  src="/static/integrations/integration-details.png"
-  alt="Integration details view showing Display Name, Description, Members, Reconnect, and Disconnect"
-  width={700}
-  height={420}
-/>
-
-From here you can:
-
-- Edit the **Display Name** and **Description**
-- Manage **Members** — invite teammates by email and assign them an **Admin** or **Member** role
-- **Reconnect** — re-authorize the connection if it has expired or if you need to update permissions
-- **Disconnect** — remove the integration entirely
+{/* VISUAL: the connection detail view in the new Integrations page — display name, members, reconnect, disconnect. */}
 
-Click **Save** to apply changes, or **Back** to return to the list.
+- Edit the **Display name** and **Description**.
+- Manage **Members** — invite teammates and assign them an **Admin** or **Member** role. Admins can edit, reconnect, disconnect, and manage access; Members can use the connection in workflows. When you connect an account, you are its Admin.
+- **Reconnect** — re-authorize if the connection expired or you need updated permissions.
+- **Disconnect** — remove the connection entirely.
 
 <Callout type="warn">
 If you disconnect an integration that is used in a workflow, that workflow will fail at any block referencing it. Update blocks before disconnecting.
 </Callout>
 
-## Access Control
-
-Each integration has role-based access:
-
-- **Admin** — can view, edit, disconnect, reconnect, and manage member access
-- **Member** — can use the integration in workflows (read-only)
-
-When you connect an integration, you are automatically set as its Admin. You can share it with teammates from the Details view.
-
 ## Email polling groups
 
 The Gmail and Outlook email triggers can watch several team members' inboxes through a single trigger, called an **email polling group** (Team and Enterprise plans). An admin creates a group under **Settings → Email Polling**, picks Gmail or Outlook, and invites members by email; each invitee connects their own inbox through a link. On an email trigger, select the group from the credentials dropdown instead of a single account, and the trigger routes everyone's mail through the workflow.
@@ -139,9 +116,9 @@ Inviting someone to a group grants inbox access for that trigger only, which is
 
 <FAQ items={[
   { question: "Does Sim handle OAuth token refresh automatically?", answer: "Yes. When an integration is used during execution, Sim checks whether the access token has expired and automatically refreshes it using the stored refresh token before making the API call. You do not need to handle token refresh manually." },
-  { question: "Can I connect multiple accounts for the same service?", answer: "Yes. You can connect multiple accounts per service (for example, two separate Gmail accounts). Each block lets you select which account to use from the credential dropdown. This is useful when different workflows need different identities or permissions." },
-  { question: "What is a credential ID and when should I use it?", answer: "Each integration has a unique credential ID that you can use instead of the dropdown selector. This lets you pass the credential dynamically — for example, from a variable or a previous block's output — so the same workflow can use different accounts depending on the context. Copy the ID from the Details view and use Switch to manual ID in any block to paste or reference it." },
-  { question: "What happens if an OAuth token can no longer be refreshed?", answer: "If a refresh fails (e.g. the user revoked access or the refresh token expired), the workflow will fail at the block using that integration. Open Settings → Integrations, find the connection, and use the Reconnect button to re-authorize it." },
+  { question: "Can I connect multiple accounts for the same service?", answer: "Yes. You can connect multiple accounts per service (for example, two separate Gmail accounts). Each block lets you select which account to use from the account dropdown. This is useful when different workflows need different identities or permissions." },
+  { question: "What is a credential ID and when should I use it?", answer: "Each connection has a unique credential ID that you can use instead of the dropdown selector. This lets you pass the credential dynamically — for example, from a variable or a previous block's output — so the same workflow can use different accounts depending on the context. Copy the ID from the connection's detail view and use Switch to manual ID in any block to paste or reference it." },
+  { question: "What happens if an OAuth token can no longer be refreshed?", answer: "If a refresh fails (e.g. the user revoked access or the refresh token expired), the workflow will fail at the block using that integration. Open Integrations in the sidebar, find the connection, and reconnect it to re-authorize." },
   { question: "Are OAuth tokens encrypted at rest?", answer: "Yes. OAuth tokens are encrypted before being stored in the database and are never exposed in the workflow editor, logs, or API responses." },
   { question: "What happens if I disconnect an integration that is used in a workflow?", answer: "Any block referencing the disconnected integration will fail at runtime. Make sure to update those blocks before disconnecting, or reconnect the integration to restore access." },
 ]} />