# OAuthRequestCard

> A "Connect HubSpot" or "Connect Notion" card that an agent drops into the chat.

## Facts

- **Product**: Max
- **Family**: Agents
- **Global**: `window.DigitalCrew.OAuthRequestCard`
- **Source**: `max-agent: src/features/onboarding-hermes/ui/parts/oauth-request-card.tsx`
- **Import in the app**: `import { OAuthRequestCard } from "@/features/onboarding-hermes/ui/parts/oauth-request-card";`
- **Live preview**: /design/components/oauth-request-card/preview.html
- **Page**: /design/components/oauth-request-card

## Guidelines

It hands the user off to the provider to authorize, then brings them back.

**Use it for** rendering a `data-oauth-request` part in the onboarding or meetings chat. The click only navigates. The token is written server-side by the OAuth callback, and a later `tool_status: success` part confirms the connection.

**What you provide**
- `data: OAuthRequestData`, which is `{ provider: "notion" | "hubspot", connectUrl, title? }`. The title defaults to "Connect {Provider}".
- `disabled`, used while a confirmation is pending.

**Anatomy** (`.ob-oauth*`)
- A flex row with a 14px gap, `12px 14px` padding and an 8px vertical margin, a 1px `--mx-line` border and a 12px radius.
- Title: 13.5px/600 in `--mx-ink`.
- A fixed 12px explanation: "Your Max agent stores the credential — the website never keeps it."
- The button is an ink-filled link: `8px 14px` padding, 9px radius, 13px/600, `--mx-bg` on `--mx-ink`. When disabled it drops to 50% opacity and ignores the pointer.

**Setup**
- Place it inside `.maxchat` so the `mx-*` palette applies.
- The card background reads `--mx-bg-soft` and its secondary text `--mx-ink-soft`. `max-chat.css` defines neither, so they fall back to `#f9fafb` and `#6b7280`, which are light-only.
- On dark themes, map them yourself. This preview uses `--mx-surface-2` and `--mx-ink-3`.

**Don't** treat the click as success, and don't collect credentials in the chat.

## API

```ts
export interface OAuthRequestData {
    provider: "notion" | "hubspot";
    connectUrl: string;
    title?: string;
}
export declare function OAuthRequestCard({ data, disabled, }: {
    data: OAuthRequestData;
    disabled?: boolean;
}): any;
```

## Example

```html
<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
  // onboarding-chat.css reads --mx-bg-soft / --mx-ink-soft, which max-chat.css never defines;
  // mapping them to the .maxchat palette keeps the card readable in dark themes too.
  var SOFT = { height: "auto", "--mx-bg-soft": "var(--mx-surface-2)", "--mx-ink-soft": "var(--mx-ink-3)" };
  function App() {
    return h("div", { className: "maxchat mx-auto max-w-[600px] rounded-2xl border border-border/60 px-5 py-3", style: SOFT },
      h(DC.OAuthRequestCard, { data: { provider: "hubspot", connectUrl: "#connect-hubspot" } }),
      h(DC.OAuthRequestCard, { data: { provider: "notion", connectUrl: "#connect-notion", title: "Connect Notion to import your playbooks" }, disabled: true }));
  }
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>
```

## More in Agents

- [AgentAvatar](/design/components/agent-avatar.md): A Digital Worker's face as a muted, looping video in a rounded square, framed and glowing in the agent's brand colour, with an optional live dot.
- [AgentSkillTag](/design/components/agent-skill-tag.md): A tiny chip naming one of a Digital Worker's skills, tinted with that worker's colour.
- [AskMaxAction](/design/components/ask-max-action.md): A contextual "Ask Max" button.
- [CrewAgents](/design/components/crew-agents.md): The Digital Crew's eight agents, each one colour broken out of the ink: the palette ramp, the gradient, the role and the skills the public site gives them.
- [EquipmentBadge](/design/components/equipment-badge.md): A small chip showing one piece of a Digital Worker's desk equipment as an emoji, with or without its label.
- [MaxRoster](/design/components/max-roster.md): Max's 24 Digital Workers in their seven teams, each with its face (**AgentFace**) and accent dot.
- [ThinkingBox](/design/components/thinking-box.md): Max's thinking box: the running account of what he thought, which tools he called, what he sent and what came back.
- [ToolStatusIndicator](/design/components/tool-status-indicator.md): Compact dot, label and state rows that report tool activity in the onboarding and meetings chats.