ToolStatusIndicator

Guidelines#

This card covers ToolStatusIndicator and DirectToolCallIndicator, which share one row design.

Use it for stream parts that say a tool is connecting or a call is in flight, stacked in an .ob-calls column above the agent's text.

What you provide

• ToolStatusIndicator: data: ToolStatusData, which is { tool, status, message? }.
• DirectToolCallIndicator: data: DirectToolCallData, which is { tool, action, status, message? }. tool is "notion", "hubspot", "gmail" or "claire_mcp".
• status is "running", "success" or "error".

Anatomy (.ob-call*)

• A flex row with an 8px gap, 12.5px text and line-height 1.4.
• A 7px dot: #f59e0b amber pulsing every 1.2s while running, #10b981 green on success, #ef4444 red on error.
• The label is set 500 in --mx-ink with text-transform: capitalize; underscores become spaces.
• Direct calls read "tool · action" and add a 10.5px pill badge labelled "direct".
• The state sits right-aligned at 11.5px: "connecting…", "connected" or "failed". On error, message replaces it.

Setup: the rows read the mx-* variables, so place them inside .maxchat. Muted text uses --mx-ink-soft, which falls back to #6b7280.

Don't use these rows for long results or payloads. A tool's details belong in ThinkingBox.

Facts#

Group	Agents
Product	Max
Global	window.DigitalCrew.ToolStatusIndicator
Source	max-agent: src/features/onboarding-hermes/ui/parts/tool-call-indicator.tsx
Import in the app	import { ToolStatusIndicator } from "@/features/onboarding-hermes/ui/parts/tool-call-indicator";

API#

TypeScript declarations emitted from src/features/onboarding-hermes/ui/parts/tool-call-indicator.tsx (the module also exports ToolStatusIndicator, DirectToolCallIndicator).

export type CallStatus = "running" | "success" | "error";
export interface ToolStatusData {
    tool: string;
    status: CallStatus;
    message?: string | null;
}
export interface MaxApiCallData {
    service: "unipile" | "mcp";
    capability: string;
    status: CallStatus;
    message?: string | null;
}
export interface DirectToolCallData {
    tool: "notion" | "hubspot" | "gmail" | "claire_mcp";
    action: string;
    status: CallStatus;
    message?: string | null;
}
export declare function ToolStatusIndicator({ data }: {
    data: ToolStatusData;
}): any;
export declare function MaxApiCallIndicator({ data }: {
    data: MaxApiCallData;
}): any;
export declare function DirectToolCallIndicator({ data }: {
    data: DirectToolCallData;
}): any;

Example#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
  var STATUS = [
    { tool: "hubspot", status: "success" },
    { tool: "notion", status: "running" },
    { tool: "gmail", status: "error", message: "Access was denied" }
  ];
  var DIRECT = [
    { tool: "hubspot", action: "create_contact", status: "success" },
    { tool: "notion", action: "search_pages", status: "running" },
    { tool: "claire_mcp", action: "enrich_company", status: "error", message: "Timed out after 30s" }
  ];
  function Section(title, children) {
    return h("div", null,
      h("div", { className: "mb-2 flex items-baseline gap-2 text-[11px]" },
        h("code", { className: "font-mono font-semibold", style: { color: "var(--mx-ink-2)" } }, title[0]),
        h("span", { style: { color: "var(--mx-ink-3)" } }, title[1])),
      h("div", { className: "ob-calls" }, children));
  }
  function App() {
    return h("div", { className: "maxchat mx-auto max-w-[560px] gap-5 rounded-2xl border border-border/60 p-5", style: { height: "auto" } },
      Section(["ToolStatusIndicator", "data-tool-status part: a direct tool connecting"],
        STATUS.map(function (d, i) { return h(DC.ToolStatusIndicator, { key: "ts" + i, data: d }); })),
      Section(["DirectToolCallIndicator", "data-direct-tool-call part: a call made by the agent"],
        DIRECT.map(function (d, i) { return h(DC.DirectToolCallIndicator, { key: "dt" + i, data: d }); })));
  }
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>

More in Agents#