Function ToolDetail

packages/react/src/components/tool-detail.tsx:160–362

(props: {
  /** Full per-connection tool address `tools.<int>.<owner>.<conn>.<tool>`. */
  address: ToolAddress;
  /** Policy id `<integration>.<tool>` — the tree path and display value. */
  toolName: string;
  /** True for plugin-contributed static tools (policy-matched on their
   *  address verbatim, not the connection-wildcarded pattern). */
  staticTool?: boolean;
  /** Resolved effective policy — user-authored or plugin-default,
   *  unified into one shape. Surfaces in the header. */
  policy?: EffectivePolicy;
  /** When provided, the policy badge becomes a dropdown trigger that
   *  applies a user rule to this tool's exact id. */
  onSetPolicy?: (pattern: string, action: ToolPolicyAction) => void;
  onClearPolicy?: (pattern: string, policyId?: string) => void;
  patternForDisplay?: (displayPattern: string) => string;
  /** Run-tab wiring. When `integration` + `runToolName` are provided, a third
   *  "Run" tab hosts the per-connection tool tester. */
  integration?: IntegrationSlug;
  /** Bare `<tool>` address segment (may contain dots) for the Run tab. */
  runToolName?: string;
  /** This integration's connections across both owners. */
  connections?: readonly Connection[];
  /** Pre-select this connection in the Run tab (the selected tool's account). */
  initialConnectionName?: ConnectionName | string | null;
})

// ---------------------------------------------------------------------------

export function ToolDetail(props: {
  /** Full per-connection tool address `tools.<int>.<owner>.<conn>.<tool>`. */
  address: ToolAddress;
  /** Policy id `<integration>.<tool>` — the tree path and display value. */
  toolName: string;
  /** True for plugin-contributed static tools (policy-matched on their
   *  address verbatim, not the connection-wildcarded pattern). */
  staticTool?: boolean;
  /** Resolved effective policy — user-authored or plugin-default,
   *  unified into one shape. Surfaces in the header. */
  policy?: EffectivePolicy;
  /** When provided, the policy badge becomes a dropdown trigger that
   *  applies a user rule to this tool's exact id. */
  onSetPolicy?: (pattern: string, action: ToolPolicyAction) => void;
  onClearPolicy?: (pattern: string, policyId?: string) => void;
  patternForDisplay?: (displayPattern: string) => string;
  /** Run-tab wiring. When `integration` + `runToolName` are provided, a third
   *  "Run" tab hosts the per-connection tool tester. */
  integration?: IntegrationSlug;
  /** Bare `<tool>` address segment (may contain dots) for the Run tab. */
  runToolName?: string;
  /** This integration's connections across both owners. */
  connections?: readonly Connection[];
  /** Pre-select this connection in the Run tab (the selected tool's account). */
  initialConnectionName?: ConnectionName | string | null;
}) {
  const toolContract = useAtomValue(toolSchemaAtom(props.address));
  const [tab, setTab] = useState<"schema" | "typescript" | "run">("schema");
  const canRun = props.integration != null && props.runToolName != null;
  // Don't strand the user on the Run tab when this ToolDetail has no run wiring.
  const activeTab = tab === "run" && !canRun ? "schema" : tab;
  const isBlocked = props.policy?.action === "block";

  const data = useMemo(() => {
    if (!AsyncResult.isSuccess(toolContract)) return null;
    const v = toolContract.value;
    const definitions = Object.entries(v.typeScriptDefinitions ?? {}).map(([name, body]) => ({
      name,
      code: String(body),
    }));

    return {
      description: v.description,
      inputSchema: v.inputSchema,
      outputSchema: v.outputSchema,
      schemaDefinitions: v.schemaDefinitions,
      inputTypeScript: v.inputTypeScript ? `type Input = ${v.inputTypeScript}` : null,
      outputTypeScript: v.outputTypeScript ? `type Output = ${v.outputTypeScript}` : null,
      definitions,
    };
  }, [toolContract]);

  const crumbs = breadcrumbParts(props.toolName);
  const displayName = friendlyName(props.toolName);

  return (
    <div className="flex h-full flex-col overflow-hidden">
      {/* Header + tabs */}