# AskMaxAction

> A contextual "Ask Max" button.

## Facts

- **Product**: Max
- **Family**: Agents
- **Global**: `window.DigitalCrew.AskMaxAction`
- **Source**: `max-agent: src/features/agent/ui/ask-max-action.tsx`
- **Import in the app**: `import { AskMaxAction } from "@/features/agent/ui/ask-max-action";`
- **Live preview**: /design/components/ask-max-action/preview.html
- **Page**: /design/components/ask-max-action

## Guidelines

It hands the record on screen to Max's floating chat as visible, editable context, and never sends or changes anything by itself.

**Use it for** the header of a person, organization, campaign, meeting, signal or dashboard view, when the obvious next question is one for Max.

**What you provide**
- `request`: an `AskMaxRequestInput`.
  - `source`: dashboard, analytics, sales_system, signals, signal_proposal, signal_monitor, gtm_canvas, campaign, meeting, person or organization.
  - `label`: up to 120 characters, shown above the composer.
  - `objective`: up to 700 characters.
  - Optional `entityId` and a small `context` of at most 12 keys, with values trimmed to 280 characters.
- `label` (default "Ask Max") and `showLabel` (default true).
- Any [`Button`](/design/components/button.md) prop. `variant` defaults to `"outline"` and `size` to `"sm"`.

**Anatomy**: a Button with a `size-4` Sparkles icon; the labelled form uses `gap-1.5`. Icon-only keeps an `aria-label` of "{label}: {request.label}", and every button carries that text as its `title`. In the app it appears as outline "Ask Max", ghost "Review with Max" and rounded-full "Run full review".

**Behaviour**: a click dispatches a `max-agent:ask-context` window event with the request and a generated prompt. The prompt tells Max to treat the context as data, verify it live, and ask before creating, sending or deleting anything.

**Don't** put secrets or large payloads in `context`, or use it as a "run now" button. Execution goes through Max's confirmation in chat.

## API

```ts
interface AskMaxActionProps extends Omit<ComponentProps<typeof Button>, "children" | "onClick"> {
    request: AskMaxRequestInput;
    label?: string;
    showLabel?: boolean;
}
export declare function AskMaxAction({ request, label, showLabel, variant, size, className, ...buttonProps }: AskMaxActionProps): JSX.Element;
```

## Example

```html
<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
  var PERSON = {
    source: "person", label: "Claire Dubois, CFO at Northwind Traders", entityId: "3f2b9c1e-6d4a-4b8e-9a51-2c7d0e4f8a10",
    objective: "Prepare me for Thursday's first call: what Northwind is reviewing in Q1, who else is likely in the buying group, and the one question that would qualify the deal fastest.",
    context: { title: "CFO", company: "Northwind Traders", stage: "Meeting booked", last_touch: "Replied on LinkedIn today" }
  };
  var CAMPAIGN = {
    source: "campaign", label: "Q4 CFO outreach", entityId: "c0ffee00-0000-4000-8000-000000000001",
    objective: "Review this campaign's reply rate by step and recommend one change to the sequence, with the reason.",
    context: { status: "active", prospects: 212, reply_rate: "8.4%" }
  };
  var SIGNALS = {
    source: "signals", label: "Signals overview",
    objective: "Triage my current signal monitors and pending proposals. Explain which opportunities deserve attention first, what evidence is missing, and the safest next GTM action.",
    context: { pending_proposals: 3, monitors: 5, active_monitors: 4 }
  };
  function App() {
    var r = React.useState(null), last = r[0], setLast = r[1];
    React.useEffect(function () {
      function onAsk(e) { setLast(e.detail); }
      window.addEventListener("max-agent:ask-context", onAsk);
      return function () { window.removeEventListener("max-agent:ask-context", onAsk); };
    }, []);
    return h("div", { className: "mx-auto flex max-w-[640px] flex-col gap-4" },
      h("div", { className: "flex items-center justify-between gap-3 rounded-xl border border-border/60 bg-card px-4 py-3" },
        h("div", { className: "min-w-0" },
          h("div", { className: "truncate text-sm font-semibold" }, "Claire Dubois"),
          h("div", { className: "truncate text-xs text-muted-foreground" }, "CFO at Northwind Traders · Meeting booked")),
        h("div", { className: "flex shrink-0 items-center gap-2" },
          h(DC.AskMaxAction, { request: PERSON }),
          h(DC.AskMaxAction, { request: CAMPAIGN, showLabel: false, variant: "ghost", size: "icon-sm" }))),
      h("div", { className: "flex items-center gap-2" },
        h(DC.AskMaxAction, { request: SIGNALS, label: "Review with Max", variant: "ghost" }),
        h(DC.AskMaxAction, { request: SIGNALS, label: "Run full review", variant: "default", className: "rounded-full" })),
      h("div", { className: "rounded-xl border border-dashed border-border bg-muted/30 px-4 py-3 text-xs" },
        h("div", { className: "mb-1 font-medium text-muted-foreground" }, "What reaches Max's composer"),
        last
          ? h("div", { className: "space-y-1" },
              h("div", { className: "font-medium text-foreground" }, last.label),
              h("div", { className: "line-clamp-2 text-muted-foreground" }, last.objective))
          : h("div", { className: "text-muted-foreground" }, "Click a button: the request is dispatched as an event with the record as context. Nothing is sent until you confirm in chat.")));
  }
  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.
- [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.
- [OAuthRequestCard](/design/components/oauth-request-card.md): A "Connect HubSpot" or "Connect Notion" card that an agent drops into the chat.
- [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.